<!--
  ===== 히스토리 =====
  index_30_8.html → index_30_9.html
  - [현재 위치 마커 색상: 파랑 → 민트] CSS 2줄만 변경.
    · .gps-dot  : #1a73e8 → var(--mint-deep)  (rgb(0,200,160))
    · .gps-ring : rgba(26,115,232,0.35) → rgba(0,200,160,0.35)
      ※ rgba()에는 CSS 변수를 직접 넣을 수 없어 --mint-deep의 값을 그대로 적었다.
        :root에 --mint-rgb를 추가하는 방법도 있지만 기존 토큰 블록을 건드리게 되어 택하지 않았다.
    · 이제 마커·확산 링·위치 확보 시 버튼(.mapfab.located)이 모두 같은 민트로 통일된다.
    · --mint-deep(어두운 민트)을 고른 이유: 카카오 지도 타일이 흰색~연회색이라
      #00E5CC(미니차트 토글의 밝은 민트)는 배경에 묻힌다. 2.5px 흰 테두리와 함께 대비가 확보된다.
      밝은 쪽으로 바꾸려면 .gps-dot의 var(--mint-deep)만 #00E5CC로 교체하면 된다.
  - JS·마크업·동작 변경 없음. 신규 식별자 없음.

  index_30_7.html → index_30_8.html
  - [검색바에서 X(지우기) 버튼 제거] 남는 버튼은 닫기(<) 하나.
    · 오버레이는 열 때마다 input.value=''로 초기화되므로 매번 빈 칸에서 시작한다 →
      지우기 버튼이 실제로 눌릴 상황이 거의 없었다.
    · 제거 범위: 마크업 button#aptSearchClear, JS의 clearBtn 조회 1줄과 리스너 1줄.
      .as-btn CSS는 닫기 버튼이 계속 쓰므로 그대로 둔다.
  - [검색 결과를 고르면 지도만 이동] 상세 패널 즉시 열기를 뺐다.
    · 이유: 결과를 누르는 순간 패널이 화면 절반을 덮어, 정작 '지도에서 어디로 갔는지'를 확인할 수 없었다.
      검색의 1차 목적은 위치 파악이고, 상세는 지도 위 이름창을 탭하면 기존 경로로 열린다.
    · 이동 규칙은 30_7 그대로 — 화면 안이면 panTo, 밖이면 setCenter, 레벨 4보다 멀면 4로 당김.
      결과 클릭과 Enter 선택 둘 다 pickRow를 거치므로 동작이 갈리지 않는다.
    · 손잡이 SEARCH_PICK_ACTION — 'move'(신규 기본) / 'panel'(30_7 동작: 이동 + 패널 즉시 열기).
      openDongAreaPanel 호출 블록은 지우지 않고 'panel' 분기에 원문 그대로 남겼다.
  - 알려진 제약(이번 범위 밖): 필터·거래량·대장 모드에서는 idle 재그리기 조건에 걸려
    이동한 자리에 해당 단지 이름창이 없을 수 있다. 지도는 정확히 그 좌표를 중심에 두지만
    시각적 표식이 없다 → 필요하면 다음 버전에서 '검색한 단지 잠깐 강조' 추가를 검토.
  - 신규 식별자: SEARCH_PICK_ACTION (충돌 0건). CSS 변경 없음.

  index_30_6.html → index_30_7.html
  - [우측 하단 지도 액션 버튼 신설] #mapFabs — 아파트 검색(돋보기) / 내 위치(GPS 조준점) 원형 버튼 2개.
    · 좌하단 #miniTrendToggle(left:12px/bottom:40px)과 대칭으로 right:12px/bottom:40px.
    · z-index 2050 — 안내 배너(2000)보다 위, 상세/거래량 패널(2100)보다 아래.
      패널이 열리면 자연스럽게 가려지고, 배너 위에서는 눌린다(배너는 pointer-events:none).
    · 데스크톱에서 거래량 패널이 열리면 우측 400px 칼럼을 비켜서야 한다. #rightFilters는 JS로
      right:410px를 주지만, 여기서는 기존 코드를 건드리지 않으려고 형제 선택자로 CSS만 썼다 —
      '.transactionPanel.open ~ #mapFabs { right: 410px }'. 그래서 #mapFabs 마크업은 반드시
      .transactionPanel '뒤'에 있어야 한다(위치가 곧 동작 조건).
    · 역세권/학구도 안내 배너는 하단 전폭에 높이가 가변이라 버튼을 덮는다. 배너에 클래스가 없어
      style 속성을 MutationObserver로 관찰하고 실측 높이(offsetHeight+20)만큼 버튼을 밀어 올린다.
  - [내 위치(GPS)] navigator.geolocation.getCurrentPosition → 지도 이동 + 현재 위치 마커.
    · 마커는 0×0 래퍼 CustomOverlay(.gps-wrap) — metro-radar-wrap과 같은 패턴이라 앵커 원점이 곧 좌표.
      파란 점 + 확산 링(CSS pulse). clickable:false라 지도 제스처를 막지 않는다.
    · 이동 규칙: 현재 화면 안이면 panTo, 밖이면 setCenter. 먼 거리 panTo는 중간이 빈 타일로
      길게 흐르며 느리다. 레벨이 4보다 멀면 4로 당긴다.
    · 실패 사유별 안내를 분리 — 미지원 / https 아님 / 권한 거부(code 1) / 지연(code 3) / 기타.
      ※ window.isSecureContext===false 인 경우(=http 접속)에는 요청 자체를 하지 않고 안내만 한다.
        브라우저가 http에서 위치 API를 차단하므로, 무반응 대신 원인을 알리는 편이 낫다.
        구현하지 않은 브라우저는 undefined라 통과시킨다(fail-open).
    · 서비스 지역(부산·울산) 밖이면 이동은 하되 토스트로 알린다 — '내 위치' 버튼이 안 움직이면
      고장으로 보이므로, 이동시키고 왜 빈 지도인지 설명하는 쪽을 택했다.
  - [아파트 검색] 돋보기 → 상단 검색 오버레이(#aptSearch).
    · 입력창을 상단에 두는 이유: 하단 고정이면 모바일 키보드가 입력창을 덮는다
      (iOS는 레이아웃 뷰포트가 줄지 않아 fixed 요소가 키보드 뒤로 들어감). 목록 높이는 dvh로 잡아
      키보드가 올라온 만큼 줄어들게 했다.
    · 매칭: normalizeName(공백·-_. 제거)로 aptNm·dispNm을 먼저 보고, 못 찾으면 umdNm·gu로도 찾는다.
      → '문수로 2차'와 '문수로2차'가 같게 잡히고, '옥동'으로 동 전체를 훑을 수 있다.
      순위는 접두 > 부분 > 지역, 각 그룹 안에서는 이름 짧은 순(=검색어에 가까운 순). 최대 40건 + '외 N개'.
    · 중복 제거 키는 normalizeName(aptNm)|sggCd — 트렌드/메타 조회와 같은 규약이라
      apt_coor와 silv_coor에 같은 단지가 있어도 한 줄만 나온다.
    · 행 클릭 → 지도 이동 후 openDongAreaPanel(). 넘기는 메타는 drawMarkers의 openPanelHandler와 동일 형태.
    · 부제는 getAptMasterMeta()의 세대수·준공년도를 우선 사용(없으면 APTS의 buildYear). 분양 판정은
      지도 라벨과 같은 presaleAptKeys 규칙 재사용 → '분양' 태그.
    · 이름 하이라이트는 원문 기준으로만 한다 — 정규화 문자열은 공백이 지워져 위치가 어긋난다.
      출력은 전부 escapeHtml을 거친다(검색어에 태그를 넣어도 삽입되지 않음).
    · 키보드: ↑/↓ 이동, Enter 선택(미선택이면 첫 행), ESC 닫기. 딤 영역 탭으로도 닫힌다.
    · 검색 오버레이는 history를 쌓지 않는다 — 상세 패널의 dapHistoryPushed와 뒤로가기 소비 순서가
      엉키면 '행을 눌러 연 패널이 곧바로 닫히는' 경합이 생긴다. 닫기 3경로(×/딤/ESC)로 대체.
  - 손잡이 MAP_FAB_UI — 'on'(기본) / 'off'(버튼 숨김 + 배선 생략, 즉시 롤백).
  - 기존 코드 수정 0줄. 신규 코드는 IIFE(initMapFabs) 안에 가둬 최상위 스코프를 오염시키지 않는다.
    읽기만 하는 기존 자산: map, APTS, toast, normalizeName, escapeHtml, sggCdToGu,
    getAptMasterMeta, openDongAreaPanel, presaleAptKeys, aptTrendLoaded.
  - 신규 식별자(최상위): MAP_FAB_UI, SEARCH_MAX_RESULTS, SERVICE_BBOX, initMapFabs.
    DOM id: mapFabs, searchFab, gpsFab, aptSearch, aptSearchInput, aptSearchList,
    aptSearchClear, aptSearchClose. CSS 클래스: mapfab, gps-wrap/gps-dot/gps-ring,
    as-box/as-bar/as-input/as-btn/as-list/as-row/as-nm/as-tag/as-sub/as-msg/as-more.
    키프레임: mapfabSpin, gpsPulse. (모두 충돌 0건 확인)

  index_30_5.html → index_30_6.html
  - [이름창 위에서 핀치 줌·드래그가 안 되던 문제] 손가락이 아파트 이름창에 닿으면 확대/축소·화면 이동이
    먹지 않아, 라벨 없는 빈 공터에서만 조작할 수 있던 불편 해소.
    · 원인: 이름창(.aptLabel)이 touchstart를 stopPropagation으로 전면 차단하고 있었다(drawMarkers).
      카카오 지도의 터치 핸들러는 #map 컨테이너(=라벨의 조상)에 버블 단계로 걸려 있어, 손가락이
      라벨 위에 닿는 순간 지도가 그 터치를 아예 보지 못한다. 두 손가락 중 하나만 라벨 위여도
      첫 손가락에서 터치 세션이 시작되지 못해 핀치가 성립하지 않는다.
      (라벨을 탭했을 때 지도가 딸려 움직이는 것을 막으려던 장치 — 그래서 삭제가 아니라 판정 시점을 옮겼다)
    · 해결: touchstart를 막지 않고 지도로 흘려보낸다. 대신 '탭이냐 제스처냐'를 click 시점에 판정 —
      한 손가락 이동이 LABEL_TAP_SLOP(10px)를 넘었거나 손가락이 2개 이상이었으면 패널/팝업을 열지 않는다.
      핸들러(labelGestureStart/Move)는 전역 1벌을 재사용한다 — 라벨이 수백 개씩 재생성되므로
      라벨마다 클로저를 새로 만들지 않기 위함(기존 click/mousedown 인라인 클로저는 무수정).
    · 손잡이 LABEL_GESTURE — 'gesture'(신규 기본) / 'legacy'(30_5 이전 전면 차단).
      기존 touchstart 차단 3줄은 한 줄도 지우지 않고 legacy 분기 안에 원문 그대로 두었다.
    · 마우스는 무변경. 데스크톱은 라벨 위에서 휠 줌이 원래부터 정상 동작했고(라벨에 wheel 리스너 없음),
      mousedown 차단(라벨에서 시작하는 드래그 금지)은 의도된 기존 동작이라 그대로 둔다.
      → 이번 증상은 모바일 터치 전용이었다.
  - [대장(왕관) 모드 동반 수정] 대장 라벨·계보 팝업도 같은 규약으로 통일.
    · 대장 라벨 오버레이의 clickable:true → false(gesture 모드에 한해). 27_16에서 팝업으로 이미 확인했듯
      clickable:true는 카카오가 '오버레이 컨테이너 자체'에서 이벤트를 가로채므로, 내 stopPropagation을
      풀어도 핀치가 지도까지 닿지 않는다. 라벨 클릭은 DOM 리스너가 직접 처리해 clickable에 의존하지 않는다
      (기본 지도 이름창이 이미 clickable 미지정=false로 동일하게 동작 중).
    · 부작용 차단: clickable:false가 되면 라벨/팝업 위의 탭도 지도 click으로 올라와
      map 'click' → daejangClosePopup()이 걸린다 → '팝업이 열리자마자 닫히는' 회귀(27_5 ①과 같은 부류).
      labelGestureBlocksMapClick()으로, 라벨/팝업에서 시작된 터치의 지도 click만 1회 무시한다.
      빈 지도를 탭해 닫는 동작은 그대로 — mapContainer 캡처 단계 touchstart가 매번 플래그를 내리고
      라벨의 버블 단계 touchstart가 다시 올리는 순서라, '이번 터치가 라벨에서 시작됐는지'만 정확히 남는다.
    · 팝업은 제스처 뒤 합성 click이 닫기(.dj-x)·상세(.dj-detail)를 오작동시킬 수 있어,
      캡처 단계 click 리스너 1개로 먼저 삼킨다(캡처는 자식 버튼 핸들러보다 먼저 실행).
    · 기존 mapContainer 터치 리스너(학구도 통학로 제거, capture:true)와는 서로 간섭하지 않는다.
  - 신규 식별자: LABEL_GESTURE, LABEL_TAP_SLOP, lblTapX, lblTapY, lblTapMoved, lblTapMulti, lblTapOnLabel,
    labelGestureStart, labelGestureMove, labelGestureConsumed, labelGestureBlocksMapClick, bindLabelGesture
    (충돌 0건 확인). CSS 변경 없음.

  index_30_4.html → index_30_5.html
  - [거래량 패널 v0.8 이식] 목업 tx_panel_mockup_v0_8 을 본 파일에 반영.
    전부 TX_PANEL_UI 상수와 body.tx-v08 클래스로 감쌌다. 'legacy'로 되돌리면
    클래스가 안 붙고 신규 진입점이 조기 반환하므로 기존 화면이 그대로 복구된다.

    · [카드 = 거래 1건] 기존 li.trans-item 생성 줄은 한 줄도 지우지 않았다.
      forEach 안에서 li.innerHTML 대입이 끝난 '뒤에' v08 분기로 className/innerHTML을
      덮어쓴다(30_4의 BUNYANG_COLOR_SOURCE와 동일한 덮어쓰기 패턴).
      카드에 거래일·금액·층·면적·dealingGbn·준공년도를 싣는다.

    · [칩 필터] 시 → 군구 → 매매 → 분양 ······(우측) 기간.
      색은 시·군구·매매·기간을 .txchip.on 의 민트(var(--mint-deep))로 통일하고
      분양만 지도 분양 배지(.bunyang-badge)와 같은 보라 #9900FF 로 구분한다.
      (초판은 매매가 #00a884 라 시 칩과 어긋났고, 분양은 #c2410c 라 적색으로 보였다)

    · [분양권 / 입주권 분리] silv_YYYY_MM.json 의 ownershipGbn 을 읽어 카드 태그를 3종으로 나눈다.
      매매(민트 틴트) / 분양권(보라 #9900FF 틴트) / 입주권(살구 #fed7aa).
      txOwnershipGbn() 은 키 표기 흔들림(ownershipGbn·ownershipgbn·OwnershipGbn)에 대비해
      대소문자 무시로 찾고, 값이 '입'으로 시작할 때만 입주권으로 본다. 값이 없으면 분양권 취급.
      거래량 패널은 DB가 아니라 JSON 파일을 직접 읽는 경로라 이 필드를 그대로 쓸 수 있다
      (dealingGbn 과 달리 파이프라인 수정이 필요 없다).
      필터 칩은 '분양' 하나로 두 종류를 함께 담는다(둘 다 _source==='silv').

    · [배지 색 통일] 매매·분양권·입주권·직거래 배지의 글자를 전부 흰색으로,
      배경은 옅은 틴트가 아니라 팔레트 원색(솔리드)으로 맞췄다.
        매매   var(--mint-deep)  분양권 #9900FF   입주권 #fb923c   직거래 #FF99CC
      틴트+진한 글자와 솔리드가 섞여 있으면 직거래만 유독 진해 보이는 불일치가 생긴다.
      · 미정리 — 흰 글자 대비율이 분양권 5.5:1 외에는 낮다(매매 2.15 / 입주권 2.26 / 직거래 1.97).
        특히 직거래 #FF99CC는 실기기에서 읽기 어려울 수 있다. 진한 핑크 #D6337F(4.53:1) 대안 보류 중.
      · '취소' 배지(.txc-tag.cx)는 요청에 없어 기존 틴트 그대로 뒀다.
      매매/분양은 캐럿 없는 단독 토글이고 둘 다 끄는 것은 막았다(빈 화면 방지).
      기간 칩만 margin-left:auto 로 우측에 붙는다.
      기존 .tx-region-row 스위치와 .control-panel 은 display:none 으로 숨기기만 한다.

    · [기간 팝오버] 새 슬라이더를 만들지 않고 기존 .cp-head / .cp-slider-wrap DOM을
      #txPeriodHost 로 appendChild 해서 옮긴다. appendChild는 리스너를 유지하므로
      슬라이더 드래그(setupSlider)와 '거래 취소' 토글(cancelOnlyToggle)이 재바인딩 없이 산다.
      → showCancelledOnly 의 배타 동작(켜면 취소 건'만')도 원본 그대로.
      토글이 팝오버에 숨어 있어 켠 걸 잊기 쉬우므로 기간 칩을 활성색으로 바꾸고
      리스트 헤더에 '거래 취소' 배지를 띄운다.

    · [면적 일치 미니 차트] 기존 aptTrendMap 은 84타입(80<ar<90)만 담아
      101.94㎡ 거래에도 84㎡ 추이가 붙었다. aptAreaTrendMap 신설 —
      키 '정규화이름|시군구코드|면적(2자리)'. loadAptTrendData 의 기존 순회 안에
      집계 5줄만 덧붙였고 84타입 로직은 손대지 않았다(같은 파일을 재사용, 추가 fetch 0).
      폴백 없음 — 그 면적의 관측이 2개월 미만이면 '추이 데이터 부족'으로 비운다.

    · [시 필터 '전체'] txRegion 에 'all' 값을 추가. 기존 while 파일목록 루프는 무수정이고,
      'all'일 때 그 뒤에 부산 파일 목록을 덧붙이는 블록을 추가했다(fetch 2배).
      마커용 regionApts 도 'all'이면 APTS 전체를 쓰도록 regionAptsEff 를 거친다.

    · [모바일 시트] 상단 끝까지(스냅 50/75/100%) + 라운드 제거. #txSheetGrab 그래버 신설.
      기존 .tp-minimize-btn / .tp-restore-btn 동작은 그대로 둔다.
      · 닫힘 상태는 bottom: calc(0px - var(--tx-sheet-h)) 로 '패널 높이만큼' 내린다.
        원본의 bottom:-50%는 max-height 38% 기준이라 높이가 75%로 커지면 25%가 화면에 남는다.
      · 여닫는 슬라이드는 bottom 이 아니라 transform: translateY() 로 한다.
        bottom 은 레이아웃 속성이라 메인 스레드에서 애니메이션되는데, .open 직후 같은 태스크에서
        카드 수백 장을 렌더하면 그 구간 프레임이 통째로 빠져 '아래에서 생겼다 위로 튀는' 2단이 된다.
        여기에 loadCurrentRangeData() 를 rAF 2번 뒤로 미뤄 시트가 먼저 올라오게 했다(지연 약 32ms).
        (CDP 스크린캐스트로 실제 그려진 프레임 측정 → 수정 전 3개 / 수정 후 22개)
      · body.tx-v08 클래스는 <body> 첫머리 인라인 스크립트가 '첫 페인트 전에' 붙인다.
        init 끝(96파일 로드 뒤 약 1.2초)에서 붙이면 height는 즉시 점프하는데 bottom은
        0.3초 트랜지션을 타서, 그 사이 패널이 화면 하단에 최대 215px 잠깐 보였다 사라졌다.
        (rAF 프레임 단위 실측 → 수정 후 CPU 6배·저속망에서도 노출 0프레임)
        initTxPanelV08()은 legacy일 때 이 클래스를 도로 떼어내는 역할만 한다.

    · 미해결 — dealingGbn(직거래/중개거래)은 현재 수집 파이프라인이 저장하지 않는 필드다.
      sql_trades.php 가 돌려주는 필드 목록(aptNm, sggCd, umdNm, jibun, buildYear, aptDong,
      excluUseAr, floor, dealAmount, dealYear, dealMonth, dealDay, cdealDay, cdealType)에 없다.
      카드는 값이 있을 때만 배지를 그리므로 지금은 표시되지 않는다.
      trades_item.php → data.php → sql_trades.php 가 이 필드를 실어 나르기 시작하면 자동으로 뜬다.

  - 신규 식별자: TX_PANEL_UI, TX_AREA_MIN_PTS, aptAreaTrendMap, txAreaKey, txGugun,
    txSrcApt, txSrcSilv, txSort, txChipKind, buildAreaTrendSparkSvg, buildTxCardHtml,
    syncTxChips, openTxChip, closeTxChip, txSheetSetPct, initTxPanelV08, regionAptsEff,
    #txChipRow / #txChipPop / #txChipScrim / #txPeriodHost / #txListHead / #txSheetGrab,
    CSS .txchip* / .txc-* / .tx-listhead / .txsheet-grab / body.tx-v08 (충돌 0건 확인).

  index_30_3.html → index_30_4.html
  - [요청 1 · 동별 카드 배치 반전] 표 → 차트 순서를 차트 → 기간 슬라이더 → 표 → 힌트로 변경.
    시세 추이 카드(차트 → 기간바 → 거래 내역 표)와 배치가 같아진다.
    · DONG_CARD_ORDER 상수 신설 (DONG_COMPARE_UI 바로 아래) — 'chart-first'(신규 기본) /
      'table-first'(기존). renderDongAreaTable의 appendChild 두 줄에 조건만 붙이고,
      뒤쪽에 chart-first용 appendChild 블록을 추가했다. 선언(const hint = …)은 제자리 유지.
    · DONG_COMPARE_UI='tabs'/'stacked' 두 경로가 renderDongAreaTable을 공유하므로 양쪽 다 바뀐다(의도).
    · CSS 1줄 추가: .dap-card .xrange-block + .dap-table-wrap { margin-top: 18px; }
      인접 형제 선택자라 table-first에서는 매칭 자체가 안 되어 기존 배치엔 영향이 없다.

  - [요청 2 · 시세 추이 ↔ 분양가/프리미엄 색 통일] 같은 면적이 두 섹션에서 다른 색으로 나오던 문제.
    · 원인: 팔레트 값은 같은데(BUNYANG_PALETTE = SUMMARY_GROUP_PALETTE 9색 + '#10b981','#fb923c')
      인덱스 기준이 달랐다.
        - 시세 추이 정확면적: SUMMARY_PALETTE[exactStyleOffset + 순번] — 민트를 건너뛰고 피치부터,
          거기에 exactStyleOffset(=면적대 수 − 1)만큼 더 밀림('전체'선과 색 충돌 방지 장치).
        - 분양가/프리미엄: BUNYANG_PALETTE[ALL_AREAS 오름차순 순번] — 민트부터, offset 없음.
      → 예: 면적대가 2개인 단지의 최소 면적이 시세 추이에선 핑크, 분양 쪽에선 민트가 된다.
    · 해결: 분양 쪽이 시세 추이를 따라간다(반대 방향은 금지 — exactStyleOffset을 건드리면
      시세 추이의 '전체'선과 정확면적선이 같은 색이 될 수 있다).
      buildSummaryExactAreaColorMap() 신설 — buildSummarySeriesSpecs의 순회 순서(groupLabels 오름차순
      → 그룹 내 areaKeys 오름차순)와 exactStyleOffset을 그대로 재현해 '면적값.toFixed(4) → 색' 표를 만든다.
      키를 toFixed(4)로 정규화해 "59.11"/"59.1100" 표기 차이를 흡수한다.
    · BUNYANG_COLOR_SOURCE 상수 신설 — 'summary'(신규 기본) / 'own'(기존 BUNYANG_PALETTE 순번).
      기존 ALL_AREAS.forEach 배정 줄은 그대로 두고 그 뒤에서 덮어쓰는 방식이라 'own'으로 되돌리면 즉시 복구.
    · 시세 추이에 없는 면적(분양가표에만 있고 거래가 없다가 뒤늦게 합류한 경우 등)은 아직 쓰지 않은
      BUNYANG_PALETTE 색으로 채워 중복색을 피한다.
    · 타이밍 확인: summaryRoundedGroups는 8126~8127행에서 채워지고 분양 섹션은 그 뒤
      await setTimeout(0) 다음에 렌더되므로 조회 시점에 항상 채워져 있다. 비어 있으면 빈 맵을 돌려
      기존 BUNYANG_PALETTE 배정이 그대로 남는다(안전 폴백).
    · COLOR 맵 하나가 범례 스와치·막대·라인·툴팁 색을 모두 공급하므로(7825/7882/7944/8003행)
      이 한 곳만 덮어쓰면 섹션 전체가 따라온다.
  - 신규 식별자: DONG_CARD_ORDER, BUNYANG_COLOR_SOURCE, buildSummaryExactAreaColorMap (충돌 0건 확인).

  index_30_2.html → index_30_3.html
  - [동별 가격 비교 단일 카드화] 상세 패널의 '동별 가격 비교'가 면적마다 카드를 하나씩 쌓아
    세로로 끝없이 길어지던 것을, 면적 탭 1개 + 카드 1개로 전환. 탭 클릭 시 표·차트·기간
    슬라이더가 통째로 교체된다. 시세 추이(index_26)·분양가/프리미엄과 동일한 조작 모델.
    · DONG_COMPARE_UI 상수 신설 (TRADES_SOURCE 바로 아래) — 'tabs'(신규) / 'stacked'(기존).
      기본 'tabs'. 기존 areas.forEach 카드 N개 경로는 한 줄도 지우지 않고 else로 남겨둠.
      문제 시 'stacked'로 되돌리면 즉시 복구.
    · 신규 함수 7개 (buildAreasFromTrades 바로 아래에 배치):
      countDongCompareTrades / computeDefaultDongCompareArea / destroyDongCompareChart /
      buildDongCompareCard / syncDongCompareTabActive / renderDongCompareTabs / renderDongCompareBody
    · renderDongAreaTable / buildDongAreaChart / buildAreasFromTrades / buildDongSectionHeader
      전부 무수정 재사용. renderDongCompareBody가 반환 카드에서 .dap-card 클래스와 면적 배지 h2만
      벗겨 바깥 카드 안에 심는다(테두리 이중 방지 · 배지는 활성 탭이 대신 표시).
      CSS의 .dap-card 관련 규칙은 3개(.dap-card / :hover / h2)뿐이고 직계자식 선택자가 없어
      바깥 카드가 .dap-card를 유지하는 한 하위 스타일(.dap-table-wrap 등)은 그대로 적용된다.
    · [기간 유지] bindChartXRangeSlider의 3번째 인자(rangeState)를 ref.xrangeState로 넘긴다.
      기존 동별 호출은 인자를 안 넘겨 탭을 만들면 전환 때마다 최근 5년으로 리셋됐을 것.
      apply()가 curMin/curMax를, 프리셋·드래그가 presetMonths를 되써주므로 59↔84 전환해도
      사용자가 고른 기간이 유지된다. 초기값 {presetMonths:60} = 종전 기본(최근 5년)과 동일.
    · [차트 파기] destroyDongCompareChart — 탭 전환마다 옛 차트를 dongAreaCharts에서 splice 후
      destroy. 안 하면 배열이 계속 커지고 bindGlobalTooltipCloser가 죽은 차트를 순회한다.
      (시세 추이의 destroySummaryExplorerChart와 같은 취지)
    · [기본 선택 면적] computeDefaultDongCompareArea — 시세 추이 computeDefaultSelectedSeries와
      같은 규칙. 거래량 모드 ON + 신규 거래가 있으면 그 면적, 아니면 가장 작은 면적.
      신규 거래 면적키는 Math.floor(excluUseAr)로 buildAreasFromTrades와 동일하게 만든다.
    · [탭] 단일 선택(라디오). 동별 차트는 색이 '동'에 배정되므로 두 면적을 겹치면 같은 색이 두 번
      나온다 → 다중 선택·'전체' 탭 없음. 라벨은 '84㎡ / 43건'(색점 없음 — 면적엔 색이 없다).
      면적 1개뿐이면 탭 줄 자체를 숨김. 많으면 가로 스크롤 1줄(bindScrollbarAutoHide 재사용).
    · [표 접기] 5행 초과 더보기 토글은 renderDongAreaTable이 매번 새로 만들므로 탭 전환 시
      접힘으로 리셋된다(의도된 동작).
    · CSS 신규 계열 .dap-dong-tabs / .dap-dong-tab-row / .dap-dong-tab (style 끝에 추가, 기존 규칙 무수정).
      시세 추이의 .dap-summary-area-btn 재사용은 하지 않음 — 비선택에 line-through(다중선택의
      '숨김' 의미)가 걸려 있고 --summary-column-count/--summary-button-width 세팅이 전제다.
      색은 살구톤(.bunyang-floor-tab과 동일 값) — 동별 섹션 헤더가 이미 c2다.
    · 미변경(다음 과제로 남김): 면적 목록 산출은 현행 유지(동별=Math.floor / 시세추이=
      groupAreasByRounded 클러스터). 84.97·85.02 같은 경계에서 탭 개수가 시세 추이 면적대와
      갈릴 수 있다. 동 색상도 면적별 팔레트 idx 0부터 재시작 그대로 — 탭을 바꾸면 같은 동이
      다른 색이 될 수 있다(단지 전체 동 목록 기준 배정은 buildDongAreaChart 수정이 필요해 제외).
  - 신규 식별자: DONG_COMPARE_UI, countDongCompareTrades, computeDefaultDongCompareArea,
    destroyDongCompareChart, buildDongCompareCard, syncDongCompareTabActive,
    renderDongCompareTabs, renderDongCompareBody (모두 충돌 0건 확인).

  index_30_1.html → index_30_2.html
  - [초등 부산 확대] 초등 학구도를 울산 전용 → 울산 + 부산 동시 운용.
    울산 126개 + 부산 309개 = 435개 학구도. 부산 아파트 767개는 전량 학구 매칭 확인(100%).
    · SCHOOL_ZONE_JSON_URL_BUSAN = "school_zones_busan.json" 상수 신설(울산 URL 바로 아래).
      부산 원본: 공공데이터포털 '초등학교통학구역' 전국 SHP → mapshaper 에서 SD_CD == "26" 필터
      → -proj wgs84 → GeoJSON export (7,123건 중 309건).
    · initSchoolModeData 의 Promise.all 을 2개 → 3개 fetch 로 확장.
      울산/부산 features 를 concat 해 기존 map 파이프라인에 그대로 태운다.
      학교명 매칭·centroid 예비·폴리곤 생성·아파트 매칭 로직은 한 줄도 수정하지 않음.
    · [키 전환] SCHOOL_ZONE_COLOR_MAP 의 키를 HAKGUDO_NM → HAKGUDO_ID 로 변경.
      '송정초통학구역'이 울산 1곳 + 부산 2곳(해운대구 SGG=350 / 북구 SGG=440) 총 3곳 존재해
      학구도명 키로는 색이 서로 덮어써진다. HAKGUDO_ID 는 435개 전부 유니크(충돌 0건 확인).
      울산 기존 색 배정은 이름→ID 무손실 변환이라 울산 화면 색은 종전과 완전히 동일하다.
    · [부산 색 배정] 인접 그래프(평균 인접 4.3 · 최대 11 · 고립 4개) 4색 채색.
      DSATUR 휴리스틱은 5색을 냈으나 백트래킹으로 4색 해 확보 → 기존 SCHOOL_PALETTE 4색 그대로 사용.
      균등화 33회 swap 후 77/77/78/77, 인접 학구 동일색 위반 0건.
    · [학교 좌표] 부산 309개 중 307개 정확 매칭(학교명+교육지원청), 2개는 centroid 예비.
      - 괘법초: 2026-03 감전초와 통폐합 후 폐교 → 학교위치표준데이터에 없음(정상).
      - 신연초: 2024-03 휴교 → 2026-03 재개교. 표준데이터 반영 전이라 미수록.
        school_locations_all.json 에 좌표 1건 추가하면 centroid 예비 없이 정상 매칭된다.
      공동학구 중 개림초·주학초는 학구도 EDU_NM 과 학교 소속 교육지원청이 서로 달라 2차 후보로는
      매칭되지 않지만, 첫 학교(주양초·주례초)가 매칭되어 대표 좌표는 정상.
    · 아파트 매칭은 schoolMatchAptsToZones 가 이미 APTS 전체를 순회하므로 무수정.
      부산 단지는 sggCd 26xxx 로 이미 apt_coor.json 에 통합돼 있어 추가 로드 없음.
    · 서버 업로드 필요 파일: school_zones_busan.json (신규).
      school_locations_all.json 은 신연초 좌표 추가 시에만 갱신 재업로드.
  - 신규 식별자: SCHOOL_ZONE_JSON_URL_BUSAN, zonesBusan, featuresUlsan, featuresBusan, hakId
    (모두 충돌 0건 확인).

  index_27_37.html → index_30_1.html
  - [상세 패널 거래 조회를 MySQL로 전환] 지도에서 단지 클릭 시 뜨는 상세 패널이
    월별 JSON 파일 372개(2011-01~현재 × 매매/분양권)를 받아 클라에서 필터링하던 것을,
    MySQL 조회 1회로 대체. 서버에 apts / apt_trades / silvs / silv_trades 적재 완료
    (울산+부산 매매 928,855건 · 분양권 210,371건 · 단지 6,547+1,444).
    · SQL_TRADES_API_URL = "../api/sql_trades.php" 상수 신설 (APT_META_API_URL 바로 아래).
    · TRADES_SOURCE 상수 신설 — 'db'(신규) / 'json'(기존). 기본 'db'.
      fetchAllTradesForApt 내부 맨 앞에서 분기만 하고, 기존 JSON 경로 코드는
      한 줄도 지우지 않고 그대로 아래에 남겨둠. 문제 시 'json'으로 되돌리면 즉시 복구.
    · 함수명·인자·반환 형태 무변경 → 호출부(loadAndRenderDongArea) 및
      groupTradesByArea / groupAreasByRounded / buildDongAreaFromTrades /
      renderBunyangSection / isSilv 판정 / buildYear 추출 전부 무수정.
    · API 응답은 국토부 원본 JSON 필드명을 그대로 재구성해 돌려준다
      (aptNm, sggCd, umdNm, jibun, buildYear, aptDong, excluUseAr, floor,
       dealAmount, dealYear, dealMonth, dealDay, cdealDay, cdealType, _source).
      excluUseAr 은 서버에서 (float) 캐스팅 — DECIMAL 문자열("75.2000")로 나가면
      groupTradesByArea 의 String(excluUseAr) 그룹 키가 원본(75.2)과 갈라진다.
    · 이름 매칭이 normalizeName(공백·기호 제거) → 원본 문자열 완전일치로 바뀐다.
      전환 전 전수 대조 완료: apt_coor.json 1,289개 전부 일치,
      silv_coor.json 58개 중 56개 일치. 미일치 2건은 전환 전에도 거래 0건이라 동작 동일
      ('레이카운티_준공'은 표시 제외용 수동 접미사, '힐스테이트 선암호수공원 1단지'는 거래 미발생).
      → 정규화 예비 경로는 두지 않음.
    · 기간 제한 없음(전 기간). 기존 JSON 경로는 START_YEAR=2011부터였으므로
      2010년 거래가 새로 표시된다. 의도된 변경.
    · fileCache 는 DB 경로에서 채워지지 않는다. 상세 패널이 거래량 패널의 캐시를
      예열해주던 부수효과가 사라져 거래량 첫 실행이 약간 느려질 수 있다.
      거래량·미니차트·대장 모드는 이번 범위 밖 — JSON 방식 그대로 유지.
    · 실패 시 예비 전환 없음. throw 하여 기존 catch 가 '종합 차트 로드 실패'를 표시한다
      (조용히 빈 배열을 반환하면 '거래 데이터가 없습니다'로 오인되므로).
  index_27_35.html → index_27_37.html   (※ 27_36은 결번 — 사용자 요청으로 건너뜀)
  - [분양권 좌표 파일 분리 대응] apt_coor.json에 섞여 있던 분양권 좌표를 silv_coor.json으로 분리한 데 따른 복구.
    분리 후 apt_coor.json에서 분양권 좌표가 빠져 APTS에 항목 자체가 없어졌고, 베이스 표시
    (drawBaseViewportApts)·거래량 마커·역세권/초등 후보가 모두 APTS를 단일 소스로 쓰기 때문에
    분양권 라벨이 지도에서 전부 사라져 있었음. (분양 배지·스파크 판정 presaleAptKeys는 거래 출처
    기반이라 멀쩡했고, 좌표만 없어진 상태였음)
    · SILV_JSON_URL = "../map/silv_coor.json" 상수 신설 (APT_JSON_URL 바로 아래).
    · loadSilvCoords() 신설 — loadApts()와 완전히 동일한 pick() 규약으로 파싱해 APTS에 append.
      silv_coor.json엔 '표기 이름'(dispNm) 필드가 없어 항상 null → 라벨은 아파트 이름 그대로.
    · init()에서 loadApts() 직후 await loadSilvCoords() 호출. append 순서(매매 먼저 → 분양권 나중)가
      중요 — daejangBuildCoordIndex()/findPolygonForApt() 등 first-wins 인덱스에서 매매 항목이 우선한다.
    · 성공 시 토스트 없음 — 바로 뒤 loadAptMasterMeta()의 토스트가 즉시 덮어써 어차피 보이지 않음.
      실패 시에만 "분양권 좌표 로드 실패" 알림(좌표만 못 받을 뿐 나머지 동작엔 영향 없음).
    · loadApts() 및 APTS 소비처 6곳(drawBaseViewportApts / getCombinedAptCandidates / 거래량 regionApts /
      metroCurrentCandidateApts / schoolMatchAptsToZones / daejang 좌표인덱스·regionsNeeded) 전부 무수정.
      → 파일 분리 이전과 동일하게 분양권 단지도 브랜드·역세권·초등 필터 후보에 그대로 포함된다
        (대단지·신축은 apt_master 메타가 없어 임계값 지정 시 탈락 — 이것도 분리 이전과 동일).
    · '_준공' 접미사 등 이름 기반 제외 로직은 넣지 않음 — 준공된 단지는 silv_coor.json에서 행을 직접
      제거하는 방식으로 운용(파일 내용 = 지도 표시가 1:1로 대응되도록).
  index_27_34.html → index_27_35.html
  - [동별 카드 복원] .dap-card: 27_31 #6에서 제거했던 카드를 복원하되, 분양가(.bunyang-card)·시세추이
    (.dap-summary-card)와 동일 스타일로 통일 — border 1px rgba(136,135,128,0.18) + border-radius:16px +
    padding:12px 13px 14px + background linear-gradient(180deg,#fff,#fffefa). 호버 그림자 없음.
    → 상세패널 3개 섹션 카드 스타일 완전 통일.
  index_27_33.html → index_27_34.html
  - [시세 추이 카드 복원] .dap-summary-card: 27_31 #6에서 제거했던 카드를 복원하되, 분양가 카드(.bunyang-card)와
    동일 스타일로 통일 — border 1px rgba(136,135,128,0.18) + border-radius:16px + padding:12px 13px 14px +
    background linear-gradient(180deg,#fff,#fffefa). 호버 그림자 없음(분양가 카드와 동일).
    (매매 단지의 동별 카드 .dap-card는 요청 밖이라 아직 평평 — 필요 시 별도 통일)
  index_27_32.html → index_27_33.html
  - [동별 헤더 정리] buildDongSectionHeader: 주황 세로바(.dap-section-bar)·막대그래프 아이콘(.dap-section-ico)
    제거 → 텍스트('동별 가격 비교')만. (27_32의 분양가 헤더와 동일 처리)
  index_27_31.html → index_27_32.html
  - [1·2. 분양가 헤더 정리] buildBunyangSectionHeader: 주황 세로바(.dap-section-bar)·달러 아이콘(.dap-section-ico)
    제거 → 텍스트만. 제목 '분양가 · 프리미엄 비교' → '분양가 · 프리미엄'('비교' 삭제, 가운뎃점은 유지).
  - [3. 시세 추이 면적 스크롤바 드래그 노출] 27_31에서 완전 숨김 → 평소 숨김 + 드래그/스크롤 중에만 잠깐 노출.
    · CSS: .dap-summary-area-tabs.scrolling에서 스크롤바 표시(webkit display:block/height, firefox scrollbar-width:thin).
    · JS: bindScrollbarAutoHide(el) 헬퍼 신설 — scroll 시 'scrolling' 클래스 부여, 700ms 후 제거.
      buildSummaryChartCard의 areaTabs에 바인딩.
  - [4. 분양가 면적 스크롤바 동일 컨셉] .bunyang-type-legend도 평소 숨김 + 드래그 시 노출.
    · CSS: 기본 scrollbar-width:none·::-webkit-scrollbar{display:none}, .scrolling에서 노출.
    · JS: renderBunyangSection의 elTypeLeg에 bindScrollbarAutoHide 바인딩.
  - [5. 분양가 안내박스 삭제] .bunyang-desc(주황 배경 '분양가 보기: …') display:none. 텍스트 세팅 JS는 그대로(무해).
  index_27_30.html → index_27_31.html
  - [1. 섹션 헤더 담백화] 시세 추이 헤더 제거 + 동별/분양가 헤더를 스티키 플랫카드 → 일반 제목.
    · loadAndRenderDongArea에서 buildSummarySectionHeader() append 제거(시세 추이 텍스트 자체 삭제).
    · .dap-section-header: position:sticky/top/z-index/배경/테두리/그림자/전폭 음수마진 제거 → 담백한 제목.
      (분양가·동별 헤더 공용 규칙이라 둘 다 담백화됨. 시세 추이는 미렌더라 무관.)
    · .dap-section-header:first-child margin-top -16px → 0 (스티키 전폭 보정 불필요).
  - [2. 면적 버튼 스크롤바 숨김] .dap-summary-area-tabs 가로 스크롤바 비표시(스크롤 기능은 유지) —
    scrollbar-width:none + ::-webkit-scrollbar{display:none}. 첫 진입 시 뜨던 기본 스크롤바 제거.
  - [3. 시세 차트 격자선 완화] buildSummaryChart y축 grid rgba(0,0,0,0.06) → 0.035 + lineWidth 0.5
    (더 얇고 희미하게).
  - [4. 거래 내역 표 헤더 숨김] .dap-summary-table-header display:none — '기간 내 거래 내역 · 면적' 제목 +
    우측 날짜 배지 비표시. 표 갱신 JS는 그대로(숨은 요소에 textContent만 씀, 무해).
  - [5. 데이터 테이블 흰색 통일] .dap-summary-table·.dap-table 짝수행 #fafbfc·헤더 #f6f7f9 → #fff.
  - [6. 카드 테두리 제거(모던)] .dap-card·.dap-summary-card 테두리/radius/그림자/hover그림자 제거·padding 0,
    .dap-summary-area-tabs·.dap-summary-table·.dap-table-wrap 테두리/radius 제거,
    .dap-container 배경 #f3f4f6 → #fff. (분양권 위젯 .bunyang-* 내부는 미변경)
  index_27_29.html → index_27_30.html
  - [1. 프리셋·토글 재배치] 기간 프리셋(1·2·3·5년/전체)을 기간 바 위 좌측, '층 분포' 토글을 우측으로.
    · createXRangeSliderDOM: .xrange-presets를 .xrange-preset-row(flex)로 감싸 [프리셋 그룹 | 토글] 2단 구성.
      토글 버튼(.dap-floor-toggle[data-role=floorToggle])을 이 줄 우측에 추가, refs.floorToggle로 노출.
    · 시세추이 헤더(buildSummarySectionHeader)에서 '층 분포' 버튼과 클릭 핸들러 제거 → '시세 추이'만 남김.
    · 토글 상태/노출/클릭 배선을 헤더 → renderSummaryExplorer(xrangeRefs.floorToggle)로 이전.
      getElementById('dapFloorPanelToggle') 참조 2곳(applySummaryFloorPanelVisibility·buildSummaryFloorPanel)을
      ref.xrangeRefs.floorToggle 기반으로 교체(카드마다 토글 1개라 id보다 refs 참조가 정확).
    · 순서 수정: 기존엔 buildSummaryFloorPanel(토글 노출 판정)이 ref.xrangeRefs 세팅보다 먼저 실행돼
      hidden 설정이 무효였음 → xrange 생성·xrangeRefs 세팅을 buildSummaryFloorPanel 앞으로 이동.
    · CSS: .xrange-preset-row 기본 우측 정렬, .xrange-axis-aligned .xrange-preset-row는 space-between으로
      x축 폭 안에서 프리셋(좌)·토글(우) 양끝 배치.
  - [2. 층 라벨 배경 투명] 층 조절바 좌측 층 라벨(drawFloorLabel)의 흰 배경 칩(rgba(255,255,255,.88)
    fillRect) 제거 — 텍스트만 우측에 얹어 아래 막대를 가리지 않음. 27_28에서 칩을 넣었던 것을 되돌림.
  - [3. 초기 진입 기간바 폭 버그] 층 분포를 한 번도 안 열어도 기간바가 처음부터 x축 폭으로 확장되도록 수정.
    원인: 최초 렌더 시 chart.chartArea가 아직 없어 alignSummaryXRangeToAxis가 조기 반환, rAF 2회로도
    첫 draw 완료를 못 잡는 경우가 있었음(그래서 토글을 열었다 닫아야 resize→afterLayout으로 정렬됐음).
    해결: buildSummaryChart의 Chart plugins에 afterLayout 훅(id:summaryXRangeAlign) 추가 —
    chartArea가 확정/변경될 때마다 chart._floorRef로 alignSummaryXRangeToAxis 호출. renderSummaryExplorer에서
    chart._floorRef=ref 세팅. alignSummaryXRangeToAxis에는 .xrange-axis-aligned 가드를 추가해 시세추이
    인스턴스에만 적용(동별 비교·분양가 차트는 afterLayout 훅이 없고 가드로도 이중 차단).
  index_27_28.html → index_27_29.html
  - [층 분포 토글] 층 분포 패널을 기본 숨김으로 바꾸고, 시세 추이 섹션 헤더 우측의 '층 분포' 버튼
    (#dapFloorPanelToggle, margin-left:auto로 우측 정렬)으로만 표시.
    · 상태는 모듈 변수 summaryFloorPanelOpen(기본 false). 세션 동안 유지되므로 다른 아파트를 열어도
      마지막 선택이 이어진다(헤더를 새로 만들 때 현재 상태로 버튼 활성 표시를 복원).
    · applySummaryFloorPanelVisibility(): 슬롯 display 토글 → chart.resize() → rAF에서
      alignSummaryXRangeToAxis(기간바를 바뀐 x축 폭에 재정렬) + 열릴 때만 redrawSummaryFloorHeatmap.
    · 닫을 때 층 필터가 걸려 있으면 전체(1~최고층)로 되돌리고 applySummaryFloorFilter +
      updateSummaryHighlight로 차트·면적 버튼 건수·거래 내역 표를 복원한다 — 보이지 않는 필터가
      남아 "왜 거래가 적지?" 혼란을 주지 않도록. 필터가 없으면 복원 호출도 하지 않음.
    · redrawSummaryFloorHeatmap 선두에 숨김 시 조기 반환 추가 — 숨겨진 슬롯은 clientWidth/Height가 0이라
      캔버스가 엉뚱한 크기로 잡히는 것도 함께 방지.
    · 층 정보가 없는 단지에서는 버튼 자체를 숨김(buildSummaryFloorPanel에서 toggleBtn.hidden 설정),
      열려 있어도 슬롯은 표시하지 않음.
  index_27_27.html → index_27_28.html
  - [층 라벨 위치 이동] 상·하한 층 라벨(1층/43층)이 캔버스 좌측에 있어 막대에 깔려 가리던 문제 →
    캔버스 우측 끝(층 조절바 버튼 바로 왼쪽)으로 이동, 우측 정렬. 막대가 라벨 자리까지 길어져도 읽히도록
    흰 배경 칩(rgba(255,255,255,.88))을 함께 그리고, 그리기 순서도 막대 뒤로 옮겨 라벨이 항상 위에 오게 함
    (칩을 막대보다 먼저 그리면 여전히 덮인다 — 회귀 테스트로 순서 고정).
  - [폭 재배분] 층 분포 슬롯 82 → 72px (캔버스 52 + 트랙 20). 시세 차트가 그만큼 넓어짐.
  - [기간 조절바 두께] 층 조절바와 동일 규격으로: 트랙 5→2px(#e4e6ea→#e6ebe9), 채움 5→3px,
    핸들 20→13px(테두리 2.5→2px, 그림자 약하게), 컨테이너 높이 32→20px.
    createXRangeSliderDOM은 시세추이·동별 비교·분양가 3곳이 공유하므로 두께 변경은 3곳 모두에 적용됨(의도).
  - [기간 조절바를 x축 아래로·폭 정렬] 시세 추이 인스턴스에만 .xrange-axis-aligned 클래스를 부여하고
    alignSummaryXRangeToAxis(ref)가 chart.chartArea.left/right로 슬라이더의 marginLeft·width를 지정 →
    차트 x축(플롯 영역)과 시작·끝이 일치. 블록 상단 여백/패딩 제거로 x축 바로 아래에 붙음.
    chartArea는 첫 draw 뒤 확정되므로 rAF 2회로 정렬하고, _onXRangeChange에서도 재정렬(층 패널 유무와 무관).
    ref.xrangeRefs 필드 추가. 다른 두 인스턴스는 클래스가 없어 기존 레이아웃 그대로.
  - [기간 배지 제거] '2024.03 ~ 2026.06' 날짜 배지(.xrange-range-text)를 시세 추이에서 숨김(CSS display:none).
    DOM·bindChartXRangeSlider의 textContent 갱신 로직은 그대로 둬서 다른 인스턴스에 영향 없음.
    '기간' 라벨은 좌측 y축 눈금 자리에 겹쳐 배치(absolute)해 세로 공간을 쓰지 않도록 함.
  index_27_26.html → index_27_27.html
  - [층 분포 선택 구간 음영 제거] 층 조절 시 선택 범위에 깔리던 배경 밴드(rgba(0,229,204,.09) fillRect) 폐지.
    범위 표시는 우측 세로 슬라이더와 상·하한 층 라벨이 담당.
  - [층 분포 곡선 → 막대그래프] 층마다 가로 막대(길이 = 그 층 거래 비율)로 변경. 곡선 stroke·면 채우기·
    스무딩(quadraticCurveTo) 경로 폐지, fillRect 기반으로 단순화. 좌측 기준선은 유지.
    · 면적대가 여럿이면 층 행(rowH)을 면적대 수로 나눠 나란히 배치 — 겹침·가림 없음. 막대 높이는
      단일이면 rowH-1, 복수면 rowH/n-0.4 (최소 1px). 색은 시세 차트 시리즈 색 그대로(면 알파 없이 단색).
    · 재정규화(분모 = 그 면적대의 선택 층 구간 총 건수)와 고정 앵커(전체 선택 시 최대 막대 ≈ 폭 62%,
      구간 축소 시 우측 가장자리까지 확장·초과 클램프)는 27_25/26 그대로.
  - 참고(굵기): 시세 추이 추세선 borderWidth 3, 층 분포 곡선 lineWidth 2였음 — 막대 전환으로 후자는 소멸.
  index_27_25.html → index_27_26.html
  - [층 분포 폭 폭주 버그 수정] 27_25에서 층 분포 캔버스가 매 redraw마다 폭이 dpr배로 불어나 차트를
    오른쪽으로 밀어내고 화면 밖까지 넘치던 문제.
    원인: 캔버스를 position:absolute로 두고 비트맵 크기(canvas.width = cssW×dpr)만 키운 뒤 CSS 폭을
    지정하지 않음. 절대배치 replaced 요소는 width:auto일 때 left/right가 아니라 '비트맵 크기'가 화면 폭이
    되므로, 다음 redraw의 cssW(=canvas.clientWidth)가 그 값을 다시 읽어 dpr배씩 증폭되는 되먹임이 발생
    (dpr 2 기준 62→600→1200→2400…로 확인).
    수정: ① 폭 기준을 캔버스가 아닌 '슬롯'으로 변경(cssW = floorHost.clientWidth - TRACK_W(20)),
    ② ui.canvas.style.width를 함께 명시해 고리를 끊음, ③ .dap-floor-canvas의 right 지정 제거(폭은 JS가 결정),
    ④ .dap-summary-floor-slot에 overflow:hidden — 캔버스 기본 크기(300×150)가 첫 프레임에 삐져나오는 것 차단.
    회귀 테스트: redraw 6회 반복 후 폭 불변 확인(27_25 코드에서는 실패하는 것도 역검증).
  - [층 분포 폭 축소] 슬롯 108px → 82px (캔버스 62px + 트랙 20px). 시세 차트가 그만큼 넓어짐.
  - [층 조절 바 얇게] 트랙 26→20px, 트랙선 3→2px(#e2e8e6→#e6ebe9), 선택바 5→3px,
    핸들 18→13px(테두리 2.5→2px, 그림자도 약하게). 리셋 버튼 위치 right 26→20px.
  index_27_24.html → index_27_25.html
  - [층 분포를 시세 차트 우측으로 이동] 별도 카드 한 칸을 차지하던 층 분포 패널을 폐지하고, 시세 차트와
    같은 행의 오른쪽 좁은 슬롯(108px)에 배치. 손그림 시안 구성 그대로 — 좌: 시세 차트 / 우: 층 분포 곡선
    + 세로 층 슬라이더, 하단: 기간 슬라이더.
    · buildSummaryChartCard에 .dap-summary-chart-row(flex) 신설 → chartWrap(flex:1) + floorHost(108px 고정).
      floorHost는 카드 하단(기간 슬라이더 아래)에서 이 행으로 이동. ref.chartRow 추가.
    · 플롯 밴드 정렬: 층 캔버스를 차트 캔버스와 같은 행·같은 상하 여백(8px)에 두고 높이를 맞춘 뒤,
      Chart.js의 chartArea.top/bottom을 그대로 층 축(1층~최고층) 범위로 사용 → 두 차트의 그래프 영역이
      같은 높이에서 시작·종료. chartArea는 차트 첫 draw 뒤 확정되므로 초기 렌더는 rAF 2회
      (1회차 폴백 여백 → 2회차 정렬). 세로 슬라이더 트랙도 top=8+plotTop, height=plotH로 밴드에 정렬.
    · DOM 축소: 헤더(제목)·배지·색강도 범례 div 폐지 → 제목('층 분포')은 캔버스 안 하단(시세 차트의 x축
      날짜 라벨과 같은 줄)에, 선택 범위는 선택 밴드의 상·하한 층 라벨로 캔버스에 직접 그림
      (밴드가 24px 미만이거나 단일층이면 'N~M층'/'N층' 통합 라벨 1개). '전체' 리셋 버튼만 HTML로 남기고
      층 필터가 활성일 때만 노출(syncSummaryFloorHandles에서 토글). 층 정보가 없는 단지는 슬롯을
      display:none으로 접어 차트가 폭을 모두 사용.
  - [곡선 색상 = 시세 차트 시리즈 색] 여러 면적대를 동시에 볼 때 구분되도록, 각 면적대 곡선을 시세 차트의
    해당 시리즈 색으로 그림(면 채우기는 같은 색 + 알파 '20'). 색 출처는 spec.style.color —
    차트 데이터셋과 같은 소스라 항상 일치. 한 면적대 안에서 '전체'선이 켜져 있으면 그 색, 아니면 켜진
    개별 면적 중 첫 번째 색을 사용(computeSummaryFloorHeatmapGroups가 color 필드 반환).
  - [곡선 배치] 27_24의 '면적대별 좌우 분리(동 폭 안)'에서 '공통 기준선 위 겹쳐 그리기'로 변경 — 좁은
    슬롯에서 좌우 분할은 곡선이 뭉개지므로, 같은 기준선(x=1)에서 출발해 겹쳐 그리고 색으로 구분한다.
    면적대별 재정규화·고정 앵커(전체 선택 시 피크 ≈ 폭 62%, 구간 축소 시 우측 가장자리까지 확장·클램프)는
    27_24 그대로. 선택 구간 배경 밴드(rgba(0,229,204,.09)) 추가.
  - 신규 식별자: ref.chartRow, ui.reset, ui.geom.plotTop, redraw 지역 slotH/ca/plotTop/plotBot/x0/bandTop/bandH,
    CSS .dap-summary-chart-row. 폐지: .dap-floor-panel/-head/-title/-badge/-body/-legend(CSS·DOM),
    ui.body/ui.badge, 27_24의 동별 GAP/bw 좌우 배치.
  index_27_23.html → index_27_24.html
  - [히트맵 격자 폐지 → '층 분포'] 가로 4칸 창문 격자가 정보량 대비 의미가 없어 삭제하고 곡선만 남긴 버전.
    · 패널 제목 '층 히트맵 (거래 강도)' → '층 분포'. 색 강도 범례('거래 적음~많음' 그라데이션 바)는
      셀이 사라져 의미가 없으므로 DOM에서 제거(.dap-floor-legend CSS는 복구 대비 존치, 미사용).
    · 셀 렌더 루프(창문 분할 winN/winW, heatColor, 구간 밖 globalAlpha 디밍) 및 지역 gMax 제거.
      computeSummaryFloorStats의 gMax 산출은 그대로 둠(공용 통계, 미사용 상태).
    · 셀이 없어져 동 폭 상한(52px)을 둘 이유가 사라짐 → 동 폭을 가용 폭 전체로 배분(하한 40px),
      동 간 간격 14→18px. 곡선이 훨씬 넓게 그려져 분포 형태가 읽힌다.
    · 곡선: 흰 헤일로(셀 위 대비용) 폐지, 대신 좌측 기준선(0 위치, rgba(0,0,0,.10))과 옅은 면 채우기
      (rgba(0,196,173,.13))를 추가해 폭을 읽을 기준을 제공. 선 스타일·동별 분리·재정규화·고정 앵커
      (피크 ≈ 동 폭 62%)는 27_23 그대로. 층 라벨/가이드선, 동 하단 'NN㎡' 명판도 유지.
  - 그 외(층 필터·기간 연동·거래표 연동·핸들 조작)는 무수정.
  - [부수 수정] 층 가이드선(rgba(0,0,0,.045))에 ctx.lineWidth=1 명시. 캔버스 상태는 redraw 간 유지되므로
    직전 렌더에서 곡선이 남긴 2px를 물려받아 두 번째 렌더부터 가이드선이 굵어지던 상태 누수(27_19부터
    존재, 옅은 색이라 눈에 잘 안 띔) 차단. 이번에 기준선(1px)이 추가되며 상태 흐름이 바뀌어 함께 정리.
  index_27_22.html → index_27_23.html
  - [히트맵 곡선 동별 분리] 여러 면적대 동시 선택 시 곡선이 블록 전체에 하나로 합쳐지던 것 →
    동(면적대)마다 각자 곡선 1개, '그 동'의 너비 안에만 표시 (요청 반영).
    · 각 동의 곡선은 그 동 자기 데이터만 사용: 비율 분모 = 그 동의 선택 층 구간 총 건수(재정규화),
      가로 앵커 = 그 동의 전 층 최대 비율 고정 (전체 선택 시 피크 ≈ 동 폭 62%, 구간을 좁히면 그 동
      우측 가장자리까지 늘어남·초과 시 클램프 — 27_21 재정규화 가시화 원리를 동 단위로 적용).
    · 선택 구간·기간 안에 그 동 거래가 없으면 해당 동 곡선 생략. 스타일은 기존과 동일(흰 헤일로+민트 선,
      점·백분율 라벨 없음).
    · 합산 앵커 산출(fullStats = computeSummaryFloorStats 전 층 호출) 폐지 — 동별 앵커는 stats.built의
      b.cnt에서 직접 산출(cnt는 층 선택과 무관하게 전 층 집계라 별도 호출 불필요).
  - 폐지: redrawSummaryFloorHeatmap 지역 fullStats, 27_22 블록 전체 폭 곡선(cx0/cw 합산 방식).
  index_27_21.html → index_27_22.html
  - [히트맵 곡선 범위·요소 정리] 27_21에서 곡선이 플롯 전체 폭으로 그려져 동 블록을 2~3배 벗어나던 것 수정.
    · 곡선 가로 범위를 동(히트맵) 블록 총 너비(built.length*bw + (n-1)*GAP) 안으로 제한 — 최대치가
      블록 우측 가장자리, 블록 밖 돌출 없음. 전 층 최대 비율 고정 앵커(재정규화 가시화)는 유지:
      전체 선택 시 피크 ≈ 블록 폭 62%, 구간을 좁히면 블록 우측 끝까지 늘어남(초과 시 클램프).
    · 점(흰 링+민트) 전부 제거, 피크 백분율 라벨 제거 — 곡선(흰 헤일로 + 민트 선)만 표시.
  - 폐지: 27_21 오버레이 블록의 peak/점 렌더/strokeText 라벨, 플롯 전체 폭 기준 cx0/cw.
  index_27_20.html → index_27_21.html
  - [히트맵 곡선 재정규화 시각화 결함 수정] 27_20의 층 조절 재정규화가 곡선에서 '보이지 않던' 문제.
    원인: 비율 분모(selSum) 재계산은 됐지만 가로폭을 구간 내 최대 비율(ratioMax)로 다시 정규화해
    분모가 약분됨 — 비율은 균등 배율이라 최대값 정규화가 재계산 효과를 정확히 상쇄, 곡선 모양이
    전체 곡선을 자른 것과 동일해짐. (셀 색은 구간 내 최대(gMax) 기준이 맞는 설계라 유지 — 선택
    구간이 피크 층을 포함하면 색이 안 변하는 게 정상이고, 피크를 제외한 구간(예: 고층부만)을
    선택하면 그 안에서 대비가 다시 벌어진다.)
    수정: 가로 스케일을 '전 층(현재 기간) 최대 비율'(fullStats.ratioMax) 고정 앵커로 변경 —
    전체 선택 시 피크 ≈ 폭 62%, 구간을 좁히면 selSum이 줄어 비율이 커지고 곡선이 우측으로 실제로
    늘어난다(폭 초과 시 클램프). 피크 지점에 백분율 라벨 표기(흰 헤일로 strokeText) → 재계산이
    수치로 확인됨(예시 데이터 기준 전체 18% → 4~8층 25%).
  - [히트맵 곡선 배치 수정] 동 우측 여백 배치 → 히트맵 위 오버레이로 변경(요청 반영). 동(building)
    렌더 뒤에 플롯 전체 폭으로 겹쳐 그리고, 셀 위 가독을 위해 흰 헤일로(선 4px 아래 + 민트 2px 위,
    점도 흰 링 r3 + 민트 r2) 적용. 27_20의 '여백 부족 시 폴백' 분기(bEnd/cx0/cw 조건) 폐지.
  - 신규 식별자: redrawSummaryFloorHeatmap 지역 fullStats/K/peak/strokePath (충돌 0건 확인).
  index_27_19.html → index_27_20.html
  - [시세 추이 x축 수평] 45도 비스듬하던 날짜 라벨을 분양가/프리미엄 차트(COMMON_X)처럼 수평으로.
    maxRotation/minRotation 45→0, maxTicksLimit 12→7(수평 라벨 폭 고려, 분양가와 동일 개수).
    동별 가격 비교 차트의 45도 라벨은 요청 범위 밖 — 무수정.
  - [시세 추이 차트 높이 80%] .dap-summary-chart-wrap height 300→240px. renderSummaryExplorer의
    canvas.height 280→224(responsive 이전 폴백값 일치용 — 실높이는 랩 CSS가 결정).
  - [스티키 헤더 관통 수정] 기간바 핸들(.xrange-slider-handle z-index:10)이 스티키 섹션 헤더
    (.dap-section-header z-index:5)를 뚫고 보이던 문제 → 헤더 z-index 5→20.
  - [히트맵 바탕 곡선] 층 히트맵 바탕에 '층별 거래 비율' 곡선을 민트(#00C4AD/rgba(0,160,140,.85))로 표시.
    · 데이터 = 표시 중인 전 동 합산 층별 건수(stats.total) ÷ 선택 층 구간 총 건수(stats.selSum).
      가로폭은 구간 내 최대 비율(ratioMax)로 정규화, 세로는 층 행 중심. 중점 quadratic 스무딩 + 거래
      있는 층에 점(r2). 동 블록 우측 여백에 그리고 여백<50px면 플롯 전체 폭 바탕에 깐다(셀이 위를 덮음).
    · 기간·층·면적 변경 시 기존 redraw 경로에서 stats가 재계산되므로 곡선도 함께 갱신.
  - [히트맵 선택 구간 재정규화] 셀 색 강도·곡선 비율의 분모를 '전체'에서 '선택 층 구간'으로 변경
    (computeSummaryFloorStats 신설, redraw의 인라인 집계 대체 — 집계 규칙 자체는 동일).
    예: 10층 단지 층별 [5,5,7,10,17,18,16,12,7,3]에서 4~8층 선택 → 분모 73, 4층 14%·5층 23%·6층 25%·
    7층 22%·8층 16% (기존: 전체 100 기준 10~18% 고정). gMax(셀 색 분모)도 구간 내 최댓값으로 —
    구간을 좁히면 그 안에서 색 대비가 다시 최대로 벌어진다. 구간 밖 디밍 행은 min(1, c/gMax) 클램프.
  - 신규 식별자: computeSummaryFloorStats (충돌 0건 확인). redrawSummaryFloorHeatmap 내부 지역
    stats/pts/bEnd/cx0/cw 추가, 기존 built/gMax는 stats 산출값 참조로 대체.
  index_27_18.html → index_27_19.html
  - [시세 추이 층 필터 + 층 히트맵(면적대별 아파트동)] 기간 프리셋 버튼 아래·'기간 내 거래 내역' 위에
    층 조절 패널 신설. 예: 대현더샵(최고 28층)에서 10~17층만의 데이터로 구성된 점·추세선을 볼 수 있다.
    · 최고층 = 현재 단지 거래 데이터 max(floor) (별도 출처 확보 전 임시 기준, summaryComputeMaxFloor).
      유효 층 정보가 없으면 패널 미노출·무필터.
    · 층 상태 ref.floorState={fMin,fMax,maxFloor} — 재렌더(모드 전환 등) 간 유지, 최고층 변동 시 클램프.
      기본 1~최고층 = 무필터(층값 없는 거래 포함, 기존 동작과 동일).
    · 차트 반영(applySummaryFloorFilter): dot 데이터셋 원본을 _allItems에 1회 보존 → 층 통과분으로
      _sortedItems/data/점 스타일 배열(backgroundColor·point* 5종, buildSummaryChart 생성 규칙 동일)을
      교체 — 툴팁·거래량 강조가 _sortedItems[dataIndex] 인덱스 정합에 의존하므로 반드시 세트 교체.
      MA 추세선은 chart._computeMonthlyAvg(빌드 내부 closure를 [27_19]에서 차트에 노출)로 필터본 재계산
      → '선택 층만의 데이터로 이루어진 트렌드'. _dataMinX/_dataMaxX(기간 슬라이더 도메인)는 전체 데이터
      기준 그대로(층 드래그로 기간바 불변). 드래그 중 rAF 코얼레싱, 드래그 종료 시 거래표 1회 갱신.
    · 면적 버튼 N건 = 기간∩층 (countSummarySpecInRange에 선택적 ref 인자 추가 — 미전달 시 기존과 동일).
    · 층 히트맵: 세로=층(아래 1층, 좌측 1층/10층 단위/최고층 라벨+가이드선), 면적대(groupLabel)별
      '아파트동' 1개씩 — 켜진 spec이 있는 그룹만 생성(면적 토글 시 동 추가/제거). 같은 그룹 내
      전체/개별 다중 선택은 아이템 참조 dedup 합집합(computeSummaryFloorHeatmapGroups).
      행 색 = 현재 선택 기간(chart._selectedMinX/MaxX) 내 (동,층) 거래 건수 강도(전 동 공통 최댓값 정규화,
      sqrt 이징 민트 스케일), 0건=옅은 회녹색. 층 선택 범위 밖 행은 알파 0.22 디밍. 층당 창문 칸 분할은
      장식. 동 하단에 'NN㎡' 명판. 모두 꺼지면 '표시할 면적을 선택하세요' (빈 차트와 동일 원칙).
      캔버스는 dpr 스케일, 첫 레이아웃 후 rAF 1회 실폭 렌더.
    · 층 조절 = 히트맵 우측 세로 트랙 + 핸들 2개(Pointer Events, touch-action:none으로 패널 스크롤 충돌
      방지) + 헤더의 'N층 ~ M층' 배지 + '전체' 리셋 버튼. 핸들 위치·선택영역·배지는 syncSummaryFloorHandles.
    · 갱신 연결: 기간 변경 → _onXRangeChange 확장(건수+히트맵 재집계) / 층 변경 → applySummaryFloorFilter
      (차트+건수+히트맵) / 면적 토글 → applySummaryAreaVisibility 말미 히트맵 갱신 / 재렌더 →
      floorState 유지 재적용.
  - [기간 내 거래 내역 층 연동] 거래량 모드 표(updateSummaryHighlight 분기)와 일반 모드 표
    (renderNonVolumeTradeTable) 모두 층 필터 통과 거래만 표시(summaryFloorPass). 층 필터 활성 시 표
    제목에 ' · N~M층' 표시(summaryFloorSuffix). 표의 기간 로직(거래량 슬라이더/최근 1개월+더보기)은 무수정.
  - 신규 식별자: summaryComputeMaxFloor, summaryFloorPass, summaryFloorActive, summaryFloorSuffix,
    applySummaryFloorFilter, computeSummaryFloorHeatmapGroups, redrawSummaryFloorHeatmap,
    syncSummaryFloorHandles, buildSummaryFloorPanel, ref.floorHost/floorState/floorUI,
    chart._computeMonthlyAvg, 데이터셋._allItems, CSS .dap-summary-floor-slot·.dap-floor-* (충돌 0건 확인).
  index_27_17.html → index_27_18.html
  - [분양가/프리미엄 층 탭 다중 선택] 층 구간 탭을 단일 선택(클릭 시 이전 선택 자동 해제) → 토글식
    다중 선택으로 전환 — 1~5층과 6~9층을 동시에 켜고 볼 수 있다. 같은 탭 재클릭 = 해제.
    · '전체'는 개별 구간과 상호배타: '전체' 클릭 시 개별 선택 전부 해제, 개별 구간 클릭 시 '전체' 해제.
      마지막 개별 구간까지 해제하면 '전체'로 자동 복귀 — 빈 선택(빈 차트) 상태를 만들지 않는다.
      '전체'가 이미 켜진 상태에서 '전체' 재클릭은 무동작(전체=무필터라 해제 개념 없음).
    · 상태를 curFloor(단일 키 문자열) → selFloors(Set, 빈 집합='전체')로 교체. filteredTX를 선택 구간들의
      합집합(some) 필터로 재정의 — 빈 집합이면 TX 사본 반환(반환 형태 동일). 호출부
      (renderTypeLegend/visibleTX/buildBase/buildPrem)와 층 탭 건수(floorTabCount)·기간 연동(27_17)은 무수정
      — 탭의 N건은 선택 여부와 무관한 '그 구간의 기간 내 건수' 그대로.
    · active 표시는 클릭 핸들러의 전체 해제→단일 부여 방식 대신 syncFloorTabActive()가
      floorTabCntRefs(각 항목에 btn 필드 추가)로 일괄 동기화. 초기 상태(전체만 active)는 기존 생성부 그대로.
  - 신규 식별자: selFloors, syncFloorTabActive, floorTabCntRefs 항목의 btn 필드 (충돌 0건 확인).
    폐지: curFloor.
  index_27_16.html → index_27_17.html
  - [분양가/프리미엄 ① 기간 연동] 기간 슬라이더(xrange)를 움직여도 층 탭 N건·면적 범례 N건/프리미엄 평균·
    'N건 표시 중'이 전체 기간 고정값 그대로던 문제(예: 라엘에스 '59A 63건 +3,711'이 1년 프리셋에도 불변)
    → 시세 추이의 _onXRangeChange→updateSummaryPeriodCounts 선례와 동일 개념으로, 현재 선택 구간 내
    거래만 집계해 표시.
    · inPeriod(t): TX 레코드의 x(타임스탬프)를 슬라이더 선택 구간 [xrDataMin+span·xrMin, +span·xrMax]와
      비교(경계 포함 ≥/≤ — countSummarySpecInRange와 동일 기준). applyXRange() 말미에서
      updateBunyangPeriodCounts() 1회 호출 — 층 탭은 제자리 텍스트 갱신(floorTabCntRefs), 면적 범례는
      renderTypeLegend() 재호출(항목 수 적어 재렌더 비용 무시 가능), 표시건수는 visibleTX∩기간.
      초기 렌더 경로(renderChart 말미 applyXRange)로 첫 화면부터 기본 5년 구간 건수가 표시된다.
    · renderTypeLegend는 건수/프리미엄 평균을 기간 내 거래(pt)로 집계하되, 항목 표시/숨김 판정은 기존대로
      '층 필터 기준 거래 유무'(tt) 유지 → 기간을 좁혀 0건이 되어도 항목이 사라지지 않고 '0건'/'-'로 남음
      (드래그 중 항목 깜빡임 방지, 시세 추이 버튼이 0건에도 유지되는 것과 통일). 층 탭 전환 시
      0건 면적 숨김(기존 동작)은 그대로.
    · 차트 데이터셋·y축 산정은 무수정 — 기간 표시는 기존처럼 x축 min/max 클리핑이 담당.
      renderChart 선두의 elVCount 대입(전 기간 건수)은 남겨둠 — 말미 applyXRange가 동기적으로 덮어써
      페인트 전에 기간 값으로 확정(중간값은 화면에 안 보임).
  - [분양가/프리미엄 ② 층 구간 동적 생성] 전 단지 일괄 '전체/1~N/…/10~19/20층~' 5구간 고정이던 층 탭을
    단지 최고층 기반으로 생성: 1~5층 / 6~9층 / 이후 10층 단위(10~19, 20~29, …), 마지막 밴드는 최고층 캡
    (예: 힐스테이트 문수로 센트럴 46층 → 전체/1~5층/6~9층/10~19층/20~29층/30~39층/40~46층,
    25층 → 전체/1~5층/6~9층/10~19층/20~25층). 시작=끝 밴드는 'N층' 단독 표기(예: 최고 10층 → '10층').
    · 최고층 = max(분양 JSON 전체 레코드 층, 실거래 층). '분양 대상 아님'(조합원 등)·미분양 레코드도 포함해
      집계(buildBunyangIndex에 maxFloor 필드 추가) — 조합원 물량이 최상층일 수 있어 sold만으로는 놓침.
      실거래(TX) 층과의 max 합성은 렌더 시점(renderBunyangSection의 txMaxFloor) — JSON 밖 층 거래도 탭에서 안 샘.
    · v22 자동탐지(대표 면적 official 가격 첫 평탄 경계 bStart, 2~9 아니면 6 fallback) 폐기 —
      bunyangBuildFloorRanges 재작성, 시그니처 (idx) → (idx, txMaxFloor). 구간 키는 'all' + 'f{시작층}'
      (f 접두어: '1','6' 같은 정수형 키는 삽입 순서와 무관하게 맨 앞으로 강제 정렬돼 'all'이 뒤로 밀림 → 방지).
      층 탭 생성 루프의 하드코딩 ['all','low','mid','high','top'] → Object.keys(FLOOR_RANGES) 순회(삽입 순서).
      curFloor 초기값 'all'과 filteredTX 등 FLOOR_RANGES[curFloor] 호출부는 무수정. 층 탭 CSS 3열 그리드
      (모바일 2열)도 무수정 — 46층 단지는 탭 7개가 3+3+1로 배치.
  - 신규 식별자: inPeriod, floorTabCount, floorTabCntRefs, updateBunyangPeriodCounts, txMaxFloor, pt
    (이상 renderBunyangSection 지역), maxFloor(buildBunyangIndex 반환 필드 및 지역 변수, fl(지역)).
    폐지: FLOOR_RANGES 키 low/mid/high/top(→ f1/f6/f10/…), bunyangBuildFloorRanges 내 bStart 자동탐지 로직.
  index_27_15.html → index_27_16.html
  - [계보 팝업 아래·좌우 빈 공간 드래그 재수정 — 진짜 원인은 clickable:true]
    · 27_13에서 팝업을 pointer-events:none 래퍼로 감쌌지만 여전히 막힘. 진짜 원인:
      CustomOverlay(clickable:true)는 Kakao가 '오버레이 컨테이너 자체'에 이벤트 가로채기를 걸어
      내가 준 pointer-events:none을 무력화한다(래퍼 위 카카오 내부 div가 이벤트를 먹음).
    · 팝업 내부 조작(닫기/상세/스크롤)은 전부 el.addEventListener로 직접 처리하므로 clickable 옵션에
      의존하지 않는다 → 팝업 오버레이를 clickable:false로 변경. 그러면 카카오가 컨테이너 이벤트를
      가로채지 않아, 래퍼(pointer-events:none)의 여백은 지도로 통과하고 흰 박스(pointer-events:auto)
      위에서는 정상 조작된다. 래퍼 폭을 팝업과 동일(300px)로 두어 좌우 여백도 팝업 폭으로 제한.
  - [계보 팝업 가로 스크롤 제거] 긴 단지명(예: 번영로하늘채센트럴파크) 때문에 행이 넘쳐 가로 스크롤이 생기던 문제.
    · 원인: .dj-row가 flex인데 .dj-nm2(flex:1)의 기본 min-width:auto 때문에 콘텐츠보다 줄어들지 못해 행이 넘침
      (.dj-nm2에 ellipsis가 있어도 소용없음). .dj-rows에도 가로 overflow 제어 없었음.
    · 해결: 팝업 폭 268→300px로 소폭 확대, .dj-nm2에 min-width:0(flex 축소 허용) 부여,
      .dj-rows에 overflow-x:hidden. 이제 10자 넘는 단지명은 '…'로 말줄임되고 가로 스크롤이 사라짐.
  - 변경: .dj-popup width, .dj-nm2 min-width, .dj-rows overflow-x, 팝업 오버레이 clickable:false,
    .dj-popup-wrap width(300px 고정).
  index_27_13.html → index_27_15.html
  - [대장 이름창 클릭 시 노란 테두리 제거] 아파트 클릭(팝업 오픈) 때 이름창에 씌워지던 금색 링
    (.dj-label.dj-sel의 box-shadow 첫 값 0 0 0 2px rgba(255,201,60,...))을 제거. 이름창 본래의
    색 테두리와 겹쳐 지저분해 보였음. 선택 피드백은 팝업이 뜨는 것으로 충분하므로 은은한 그림자만 남김.
    .dj-sel 클래스 토글 로직은 유지(향후 재활용). ※ 27_13의 드래그 막힘 수정 위에 이 변경을 얹은 버전.
  - 변경: .dj-label.dj-sel의 box-shadow에서 금색 링 삭제.
  index_27_12.html → index_27_13.html
  - [계보 팝업 아래 빈 공간이 지도 드래그를 막던 문제 수정]
    · 원인: 팝업 콘텐츠(.dj-popup)가 margin-bottom:116px로 왕관 위까지 띄워졌는데, 그 116px 투명 여백이
      '오버레이 콘텐츠 박스'에 포함됨. CustomOverlay(clickable:true)는 콘텐츠 박스 전체가 포인터 이벤트를
      가로채므로, 팝업 바로 아래(=여백 영역)에서 드래그하면 지도로 전달되지 않아 화면 이동이 안 됐다.
    · 해결: 팝업을 투명 래퍼(.dj-popup-wrap)로 감싸고 래퍼는 pointer-events:none(이벤트 통과=지도 드래그 허용),
      실제 흰 박스(.dj-popup)에만 pointer-events:auto 부여. 위로 띄우는 것은 margin-bottom 그대로 사용하되
      여백에서는 이벤트가 지도로 빠지도록 함. 팝업 내부 클릭/닫기/상세보기 동작은 그대로.
    · content 루트가 래퍼로 바뀌므로 clickable:false로 두어도 무방하나(이벤트는 .dj-popup에서 처리),
      기존과 동일하게 유지하고 래퍼 pointer-events로 제어.
  - 신규 식별자: .dj-popup-wrap (CSS). 로직 함수 시그니처 변경 없음.
  index_27_11.html → index_27_12.html
  - [대장 계보선 AbstractOverlay 적용 + 축소 레벨 보정 이식]
    ① Kakao Polyline의 분절 베지어(djQuadSample/djTrimPath/endArrow)를 제거하고,
       kakao.maps.AbstractOverlay 내부 SVG 2차 곡선(Q path)으로 직접 렌더링.
    ② AbstractOverlay.draw()에서 projection.pointFromCoords()로 양 끝점을 현재 지도 화면 좌표로 매번 재계산해
       이동·확대·축소 시 지도와 같은 좌표계에서 곡선과 화살표를 다시 배치.
    ③ 단방향 곡률 0.10, 왕복 곡률 0.20을 적용하고 가까운 지점에서는 최소 곡률도 화면 거리와 함께 축소.
    ④ 양끝 트림은 직선거리 비율이 아니라 48구간 호 길이 LUT를 이용해 실제 SVG 곡선 길이 기준으로 계산
       (시작 최대 16px/10%, 도착 최대 26px/14%). SVG marker-end 화살표 사용.
    · 27_11의 지역명 배지·순회 왕관·rim 제거 및 그 외 기능은 그대로 유지.
  - 신규 식별자: djCurveUidSeq, djQuadPoint, djQuadSubcurve, djQuadArcLut, djQuadTAtLength,
    DaejangCurveOverlay. 폐지: djDistM, djPointToward, djPerpRight, djQuadSample, djTrimPath, djToLatLngs.
  index_27_10.html → index_27_11.html
  - [순회 왕관 트랙(rim) 제거] 27_10에서 왕관 경로 배경으로 넣었던 .dj-rim(마스크 띠)이 이름창의
    색 테두리(.dj-label border) 위에 한 겹 더 씌워져 '이중 테두리'처럼 보이던 문제 제거.
    · .dj-run은 offset-path:border-box(라벨 자신의 테두리 박스)를 따라 돌므로 rim이 없어도 경로는 동일 —
      왕관 순회는 그대로 유지되고 덧띠만 사라짐. attachCrownsToLabel에서 rim 생성/삽입 삭제, .dj-rim CSS 삭제.
    · 원경 숨김 규칙(body.dj-far)도 .dj-run만 남김.
  - 폐지: .dj-rim (CSS), attachCrownsToLabel 내 rim em 생성.
  index_27_9.html → index_27_10.html
  - [정적 왕관 제거 → 지역명 우상단 배지 + 순회 왕관 애니메이션]
    ① 왕관 안에 지역명을 넣던 정적 SVG(djCrownSVG2 호출)를 제거. 대신 지역명(동대장=동, 구대장=구)을
       아파트 이름창 '우상단'에 배지로 표시 — 기존 new(.new-badge 좌상단)/분양(.bunyang-badge 우상단)과
       동형 규약. 색은 그 구/동 계보선 색. 클래스 .dj-region-badge.
    ② 순회 왕관 애니메이션: 라벨 테두리(border-box)를 왕관이 도는 rim 링. 데모 daejang_rim_demo.html의
       ②왕관순회+④트윈을 일반화 — 현재 대장의 '연속 재위 연수'에 따라 왕관 1/2/3개가 360/N 등간격으로 순회.
       · 연속 재위 = 현재 대장이 (중간에 뺏긴 적 없이) 지금까지 이어온 햇수. 1년→1개, 2년→2개, 3년+→3개.
       · ★ 구동은 CSS @keyframes가 아니라 JS 전역 시계(daejangCrownEpoch, 최초 1회 고정) + rAF로 각 왕관의
         offset-distance를 매 프레임 직접 갱신 — CustomOverlay 재부착(줌/드래그) 시 위상 리셋 회피.
         크레인 craneEpoch·분양 스파크 sparkEpoch·젤리 newtxJellyEpoch와 동일 전략. 데모의 CSS @keyframes djRun은
         이식하지 않음(그대로 쓰면 재부착 때마다 왕관이 처음 위치로 튐).
       · 왕관은 offset-rotate:0deg로 항상 똑바로. 링 띠·왕관 크기는 라벨 폰트(1em=--u)에 비례 → 줌 스케일 일치.
       · rim은 라벨의 position:absolute 자식(mask-composite 띠) → 레이아웃 박스 불변 = 오버레이 앵커 안정.
       · 과거 대장은 왕관 없음(현행 유지). 원경(dj-far)·연도숨김(dj-hide-years)과 독립.
    · djCrownSVG2 및 .dj-crown-abs(정적 왕관)는 미사용 → 제거. daejangShortTitle은 배지 텍스트로 계속 사용.
  - 신규 식별자: DAEJANG_CROWN_PERIOD_MS, DAEJANG_TENURE_MAX_CROWNS, daejangCrownEpoch, daejangCrownRafId,
    activeDaejangCrowns, daejangCrownReduceMotion, daejangTenureYears, daejangCrownCount, crownRunNode,
    attachCrownsToLabel, daejangCrownAngleNow, applyCrownFrame, daejangCrownTick, startDaejangCrownClock,
    CSS .dj-region-badge / .dj-rim / .dj-run / .dj-cr (데모서 이식). 폐지: djCrownSVG2, .dj-crown-abs.
  index_27_8.html → index_27_9.html
  - [아파트 이름창 테두리에 동별 색 적용] 계보선·화살표 색을 그 구/동의 아파트 이름창(.dj-label) 테두리에도
    입혀 동별 통일감을 줌. 현재 대장(왕관 달린 라벨)과 과거 대장(이름창만) 모두 같은 색 테두리.
    · 구현: makeStop에서 라벨 생성 시 label.style.border = '2px solid ' + color 로 인라인 지정
      (색은 makeStop이 이미 아는 djColorOf(g) 그대로). 기본 .aptLabel의 옅은 테두리(rgba(0,0,0,.05))를 덮어씀.
    · 미니 트렌드 배경(has-trend)과 무관하게 공존 — 테두리는 border, 스파크라인은 background이므로 겹치지 않음.
    · 팝업 선택 강조(.dj-sel)는 box-shadow(외곽 링)라 테두리 색과 독립적으로 함께 보임(서로 덮지 않음).
    · 얇으면 색이 안 보여 2px로. 라벨 폭은 border-box 기준이라 텍스트 위치·오버레이 앵커에 영향 없음.
  index_27_7.html → index_27_8.html
  - [세대수 필터] 대장 후보를 100세대 이상 단지로 제한. daejangFeed에서 getAptMasterMeta로 세대수(sds)를
    조회해 100 미만이면 집계에서 제외(구·동대장 공통). ※ 히스토리 기록이 27_8 작업 시 누락되어 27_9에서 보강 기재.
  index_27_6.html → index_27_7.html
  - [대장 시각 통일·축척별 정리]
    ① 현재 대장 왕관 색을 해당 구/동의 계보선·화살표 색과 동일하게 통일.
    ② 과거 대장의 은색 왕관 제거(단지명·연도·계보선은 유지).
    ③ 59㎡/84㎡ 버튼 크기를 구대장/동대장 버튼과 동일하게 통일.
    ④ 카카오 지도 레벨 1~4에서만 연도 칩 표시, 레벨 5 이상에서는 연도 칩 숨김.
    ⑤ 27_6에서 잘못 추가한 대장 전용 아파트명 별칭 좌표 매칭 제거 — 기존 exact 이름 매칭으로 복원.
  index_27_5.html → index_27_6.html
  - [대장 UI·표기·지역 이동 보완 — 요청 5건만 반영]
    ① 구/동대장 행 높이를 고정하고 59/84 열을 absolute로 분리해, 구대장 평형 버튼을 펼쳐도 동대장이 아래로 밀리지 않게 함.
    ② 대장 메뉴만 펼친 상태 또는 대장 모드 상태에서 거래량·좌측 기능 버튼으로 이동하면 구대장/동대장 메뉴도 함께 닫히게 함.
    ③ 현재 왕관의 가격 배지를 제거하고, 재위 기간을 연도별 원형 칩(16·17·18…)으로 각각 표시. 현재 연도도 '지금' 대신 26으로 표시.
    ④ 거래명과 좌표명이 '아파트/주상복합' 접미어 때문에 다른 경우를 대장 전용 유일 별칭으로 보완해 누락 왕관과 끊긴 계보선을 복원.
    ⑤ 대장 모드 중 울산↔부산으로 지도를 이동하면 현재 화면의 미로드 지역을 idle에서 자동 집계·렌더하도록 함.
  index_27_4.html → index_27_5.html
  - [기본 컨셉과 어긋난 지점 전수 점검 후 정합화] 대장 오버레이가 기존 라벨 규약을 따르지 않아
    생기던 버그·불일치 5건 수정. (기존 코드는 여전히 무수정 — 대장 블록 내부만 교정)
    ① [치명] 왕관·연도칩이 pointer-events:none 이라 '왕관을 클릭하면 팝업이 안 열리고 오히려 닫히던' 문제.
       크레인/배지는 장식이라 none이 맞지만, 대장 왕관은 주 클릭 타깃이다 → auto로 바꿔 클릭이
       부모 라벨(.dj-label)의 핸들러로 버블링되게 함(리스너 추가 없음).
    ② [중대] 줌별 이름 축약 미적용. 기본 지도는 truncateAptName(name, level)로 줌아웃 시 절단하고
       zoom_changed마다 갱신하는데, 대장 라벨만 원본을 유지해 줌아웃 시 지도를 덮었다
       → 생성 시 truncateAptName 적용 + 대장 전용 zoom_changed 갱신(daejangSyncLabelNames).
    ③ [중대] dispNm(표기 이름) 규칙 미적용. 기본 지도는 APTS의 dispNm이 있으면 그것을 라벨에 쓴다
       (데이터 조회엔 aptNm 그대로 — 원칙 유지) → 대장 라벨도 dispNm 우선 표기, dataset.aptnm/dispnm 부여.
    ④ [중대] '상세 보기'가 openDongAreaPanel에 거래데이터 기준 값을 넘기던 문제 → 기본 지도와 동일하게
       APTS 항목 기준(gu, buildYear)으로 전달. 좌표 매칭 시 APTS의 dispNm/gu/buildYear를 함께 보관.
    ⑤ [중] 계보 팝업이 왕관과 겹침. 라벨(bottom:32px)+왕관(49px) 높이를 고려해 margin-bottom 78 → 116px.
  - 점검하고 '의도적으로 다르게' 남겨둔 것: 대장은 shouldShowAptLabel(줌별 라벨 솎아내기)을 적용하지 않는다
    — 구/동 대표 1개씩이라 솎아낼 대상이 아니고, 원경에선 과거 대장 오버레이를 setMap(null)로 빼는 것으로 충분.
    미니 트렌드는 기본 지도와 같이 84타입 추이 고정(59 모드에서도 동일) — 기존 동작 유지.
  index_27_3.html → index_27_4.html
  - [줌 시 왕관 위치가 흔들리던 버그 수정 — 구조 원인] 대장 오버레이의 content를 'flex 컬럼 래퍼(.dj-wrap)'로
    잡고 그 안에 왕관·라벨·칩을 쌓았던 것이 원인. CustomOverlay(xAnchor .5 / yAnchor 1)는 content의 레이아웃
    크기로 앵커를 계산하는데, 래퍼는 (a) 자식 구성에 따라 크기가 달라지고 (b) body.dj-far의 transform:scale()이
    레이아웃 크기를 바꾸지 않아 시각 위치와 앵커가 어긋난다. 줌마다 재배치되면서 위치가 튀어 보였다.
    → 기본 지도 라벨과 '동일 구조'로 회귀: content = .aptLabel 단일 div. 왕관은 라벨 윗변 위로,
      연도 칩은 아랫변 아래로 position:absolute 자식으로 띄운다(레이아웃 크기에 영향 없음).
      이는 기존 크레인(.crane)·분양 배지·젤리가 이미 쓰는 검증된 패턴이며, .aptLabel의 bottom:32px 규칙도
      원본 그대로 사용한다(27_2에서 넣었던 bottom:0 상쇄 제거). transform:scale은 전면 폐기 —
      원경 축소는 absolute 자식인 왕관 SVG의 width/height만 줄여 레이아웃·앵커에 영향을 주지 않는다.
  - [왕관 안에 지역명] 배지를 2단으로 쌓던 27_3 방식 폐기 → 요청대로 왕관 '몸체 안'에 지역명을 넣고,
    가격은 기존과 동일하게 몸체 아래 배지 한 칸에 표시(viewBox도 원래 64x56으로 복귀).
    몸체 안 글자는 흰색 + 미세 외곽선(paint-order)으로 금색 왕관에서도 읽히게 함.
  - 신규 식별자: .dj-crown-abs / .dj-label / .dj-sel (CSS). 폐지: .dj-wrap, .dj-inner, .dj-past(래퍼),
    body.dj-far .dj-wrap transform.
  index_27_2.html → index_27_3.html
  - [평형 버튼 계층화] 59/84가 항상 보이던 것을 → '대장 → 구/동대장' 전개와 같은 계층으로:
    구대장(또는 동대장)을 눌러야 그 행의 좌측에 59/84가 펼쳐진다(.dj-scope-row.on .dj-size-col).
    스코프를 바꾸면 이전 행의 평형 버튼은 접힌다. 기본 평형을 84 → 59로 변경(DAEJANG_DEFAULT_SIZE).
    선택 색상도 검정 → 민트(rgb(0,255,204))로 통일해 스코프 버튼과 같은 톤.
  - [라벨 색 버그 수정] .aptLabel의 CSS 기본값은 background:rgba(0,0,0,.78) / color:#222 이고,
    기본 지도는 drawMarkers가 인라인으로 흰색(rgba(255,255,255,.95))을 덮어쓰는 구조였다.
    대장 라벨이 그 인라인 지정을 빠뜨려 '검은 배경 + 검은 글씨'로 보이던 문제 → 동일하게 인라인 흰색 배경 +
    <span class="apt-name-text"> 래핑으로 기본 지도 라벨과 완전히 같은 외관으로 맞춤.
  - [지역명을 왕관 안으로] 왕관 아래 필에 있던 "남구 야음동"을 왕관 배지 2단 중 윗칸으로 이동
    (djCrownSVG2: 위=지역명(동대장은 동, 구대장은 구) / 아래=현재가). 글자 수에 따라 폰트 크기 자동 축소하고,
    울주군 등 "범서읍 구영리"류는 마지막 토큰("구영리")만 배지에 넣는다(전체 이름은 팝업 제목·툴팁에 유지).
    5자 이상은 textLength로 배지 폭에 맞춰 압축.
  - [연도 표기를 개별 칩으로] "'16 · '18 · '21~'22" 한 알약 → 연도별 개별 칩(.dj-chip)으로 분리.
    모든 칩에 그 구/동의 계보선 색을 테두리로 입혀 선↔정류장 매칭을 유지(색점 .dj-cdot 폐지),
    현재 대장 칩만 가격 티어색으로 채움.
  - 신규 식별자: DAEJANG_DEFAULT_SIZE, djCrownSVG2, djVisitList, daejangShortTitle,
    CSS .dj-chips/.dj-chip (충돌 0건). 폐지: .dj-per/.dj-cdot.
  index_27_1.html → index_27_2.html
  - [평형 버튼 재배치] 59/84를 스코프 리스트 아래 가로줄에서 → 각 스코프 버튼의 '좌측 세로 스택'으로 이동.
    · 배치: [59][구대장][대장] / [84]  ·  [59][동대장] / [84]  (스코프 버튼은 스택 상단에 정렬)
    · 평형 버튼이 스코프별로 존재 → 클릭 1번에 (스코프+평형) 동시 확정. 상태는 여전히 전역 1쌍
      (daejangScope/daejangSize)이며, selected 표시는 '활성 스코프 행의 해당 평형'에만 켜진다.
    · 진입 로직을 daejangEnter(scope,size)로 일원화 — 스코프 버튼은 토글(재클릭=해제), 평형 버튼은 전환 전용.
    · #daejangSizeList(가로줄) 폐지 → .dj-scope-row / .dj-size-col 구조로 대체.
  - [대장 라벨을 기본 아파트 이름창으로 통일] 왕관 아래 커스텀 pill(.dj-pill) → 기존 .aptLabel 재사용.
    · 단지명이 지도 기본 라벨과 동일한 모양·크기로 표시됨(현재 대장/과거 대장 공통).
      .aptLabel의 bottom:32px(마커 오프셋용)만 .dj-wrap 안에서 0으로 상쇄 — 원본 규칙은 무수정.
    · 미니 트렌드(배경 스파크라인) 그대로 계승: applyTrendBgToLabel을 대장 라벨에도 적용.
      대장 진입 시 miniTrendOn을 강제 OFF(진입 전 값은 daejangPrevMiniTrend에 보관 → 해제 시 복원),
      '미니 차트' 토글을 켜면 대장 라벨에도 즉시 반영(#miniTrendToggle에 추가 리스너 1개, 기존 핸들러 무수정).
    · 지역명(구/동)은 라벨에서 분리해 아래 연도 필로 이동: "● 야음동 · '25~ 지금" (색점 = 계보선 색).
    · 라벨 아래 점 마커(.dj-dot) 제거 — 기본 지도가 마커를 투명 처리해 두는 것과 동일하게 라벨만 남김.
  - [계보선 색 = 브역대신평초 팔레트] 임의 6색 → SUMMARY_GROUP_PALETTE(민트·피치·핑크·라벤더·페리윙클·
    그린·레드·탄) 파생. 은왕관과 혼동되는 실버(#C0C0C0)만 제외한 8색. 선 굵기·불투명도를 소폭 상향
    (2→2.2 / 0.8→0.9)해 연한 색(피치·핑크)도 지도에서 식별되게 함.
  - 신규 식별자: daejangEnter, daejangApplyMiniTrend, daejangPrevMiniTrend,
    CSS .dj-scope-row/.dj-size-col/.dj-label (충돌 0건 확인). 폐지: #daejangSizeList, .dj-pill, .dj-dot.
  index_26_12.html → index_27_1.html   (대장 컨셉 신설 → 앞자리 27로 승격)
  - [대장(구/동) 기능 신설] 우측 '거래량' 아래 '대장' 버튼 → 좌측으로 '구대장'/'동대장' 서브버튼(+평형 59/84) 전개.
    · 구대장 = sggCd 단위 / 동대장 = sggCd+umdNm 단위. 판정은 '연최고' 단일 기준으로 확정(기록경신 방식은 미채택).
      연도별 최고 실거래 단지 = 그 해 대장 → 연속 동일 대장은 하나의 재위(대)로 병합. 해제거래는 기존 isCancelledDeal로 제외.
      평형 밴드: 59(59.0≤ar<60.0) / 84(84.0≤ar<85.0). 매매(data_*)만 사용(분양권 silv_*는 소유권 이전 전이라 대장 판정에서 제외).
    · 데이터: 기존 ../data/apt(울산) · ../data/busan/apt(부산) 월별 파일을 그대로 런타임 집계(신규 데이터 파일 없음).
      DAEJANG_START_YEAR(기본 2016)부터 현재까지를 8개씩 청크 병렬 fetch → 받는 즉시 (구/동)×(평형)×(연도) 최고가만
      남기고 원본은 버림(daejangYearBest). 기존 fileCache에 있는 달은 재사용하되, 대장이 새로 받은 원본은 fileCache에
      적재하지 않음 — 100개월+ 전 구간이라 캐시하면 메모리가 수백 MB로 불어남(거래량은 슬라이더 범위만 캐시하므로 무관).
      집계 결과는 지역별 1회만 만들고(daejangLoadedRegions) 스코프/평형 전환은 캐시(daejangAggCache)로 즉시 처리.
      ★ 추후 frozen 전환 지점: daejangLoadRegion() 하나만 사전집계 JSON fetch로 교체하면 나머지 로직은 그대로 재사용.
    · 좌표: 별도 좌표 필드를 만들지 않고 APTS(apt_coor.json)에서 조회(daejangCoordIndex: 정규화이름|sggCd|umdNm → 이름|sggCd 폴백).
      현재 대장의 좌표가 없으면 그 구/동 자체를 생략(2위로 대체하지 않음), 과거 대장만 없으면 해당 정류장·계보선만 생략(계보 목록엔 유지).
    · 지도 표기(시안 dongdaejang_8 확정안 이식):
      - 현재 대장 = 가격티어 왕관(10억↑금/7~10보라/5~7파랑/3~5민트/3억↓회색) + 지역명 필 + '대장 연도' 필
      - 과거 대장 = 은왕관 + 단지명 필 + 그 단지가 대장이던 연도 나열("'16 · '18 · '21~'22")
      - 계보선 = 2차 베지어 곡선(20점 샘플, 진행방향 오른쪽 볼록). 왕복(A→B,B→A 공존)은 두 곡선이 렌즈형 순환 루프를 이룸.
        선 색 = 구/동 구분(브랜드 팔레트 6색, 인접 1.5km 내 동일색 회피). 화살표에 연도를 싣지 않음(연도는 정류장 아래 필이 담당).
      - 원경(level≥DAEJANG_FAR_LEVEL=10): 은왕관·계보선·연도필 숨김, 현재 왕관만 축소 표시.
    · 왕관 클릭 → 계보 팝업(CustomOverlay, 위→아래 시간순 'N대' 행 + 현재 대장 강조). '단지 상세 보기'로 기존 openDongAreaPanel 연결.
    · 모드 상호배타: 대장 ON 시 거래량/역세권/학군/사이드필터 해제, 거래량·사이드필터 진입 시 대장 자동 OFF.
      대장 모드에선 아파트 라벨(drawn)을 그리지 않음 — renderCombinedAptMarkersAndEffects/drawBaseViewportApts 선두 가드 1줄씩.
    · 합류 지점(가산만): #rightFilters(CSS flex 3속성 — 단일 버튼 시절과 렌더 동일), HTML 버튼·리스트·로딩카드,
      renderCombinedAptMarkersAndEffects/drawBaseViewportApts 가드, toggleTransactionMode(대장 OFF 1줄),
      사이드 filterBtn 핸들러(대장 OFF 1줄). 그 외 기존 코드 무수정.
  - 신규 식별자: DAEJANG_START_YEAR, DAEJANG_FAR_LEVEL, DAEJANG_CHUNK, DJ_TIERS, DJ_SILVER, DJ_PAL,
    isDaejangMode, daejangScope, daejangSize, daejangYearBest, daejangAggCache, daejangLoadedRegions, daejangLoading,
    daejangOverlays, daejangLines, daejangPopupOv, daejangColorMap, daejangCoordIndex, daejangBuildCoordIndex,
    daejangFindCoord, daejangFeed, daejangPut, daejangLoadRegion, daejangRegionsNeeded, daejangBuildSeq,
    daejangAssignColors, daejangRender, daejangClear, daejangDrawGroup, daejangDrawEdges, daejangShowPopup,
    daejangClosePopup, toggleDaejangMode, setDaejangScope, setDaejangSize, daejangSyncButtons, daejangSyncFar,
    daejangGroupTitle, daejangProgress, djFmtEok, djFmtShort, djShortYr, djPeriod, djCurOf, djVisits, djStations,
    djColorOf, djTierOf, djCrownSVG, djPointToward, djPerpRight, djDistM, djQuadSample, djTrimPath, djToLatLngs,
    HTML #btnDaejang/#daejangScopeList/#daejangSizeList/#daejangLoading/#djLoadPct,
    CSS .daejangWrap/.daejangScopeBtn/.daejangSizeBtn/.dj-* (모두 충돌 0건 확인).
  index_26_11.html → index_26_12.html
  - [거래량 라벨 색 채우기 해제] 거래량 모드에서 라벨 배경을 매매=민트 농도 / 분양권=주황 농도로 칠하던 것을 흰색 고정으로 전환.
    · 손잡이: TX_LABEL_FILL(기본 false=흰색). true로 되돌리면 기존 농도 채색 복원 — getBgColorApt/getBgColorSilv는 무수정 보존.
    · drawMarkers 색 분기 '맨 앞'에 게이트 1줄만 삽입(if (!TX_LABEL_FILL) 흰색 → else if 기존 그대로).
      분기 자체를 지우지 않은 이유: 거래량 진입 시 브랜드 선택(selectedBrands)은 유지되므로(패널만 숨김)
      분기가 사라지면 다음 else if(브랜드 색)로 흘러 거래량 라벨에 브랜드 색이 새어나옴 — 구조 유지로 차단.
    · N건 카운트 배지·new/분양 배지·스파크는 무영향. 미니 트렌드는 거래량 모드 자동 OFF(수동 ON 시 흰 라벨 위 표시 — 기존 동작 그대로).
  - [신규거래(new) 라벨 젤리 바운스] new 배지가 뜨는 라벨(.aptLabel)에 시안 spark_label_demo_3.html ⑤(젤리 바운스) 모션 적용.
    · 시안 키프레임(0/15/30/45/60/75~100%: 점프→착지 눌림→잔바운스→정착→휴지, 주기 2.4s) 그대로 배열(NEWTX_JELLY_KF)로 이식.
      구간별 ease-in-out은 기존 easeInOutCrane 재사용(신규 이징 함수 없음). transform-origin: bottom center(시안 동일).
    · 구동은 CSS @keyframes가 아니라 JS 전역 시계(newtxJellyEpoch, rAF)가 매 프레임 el.style.transform 직접 갱신 —
      CustomOverlay 재부착 위상 리셋 회피(크레인 craneEpoch·스파크 sparkEpoch와 동일 전략). 모든 new 라벨이 동일 위상으로 튐.
    · .aptLabel엔 transition: transform 0.2s가 걸려 있어 프레임 구동이 뭉개짐 → .aptLabel.newtx-jelly에서 transform만
      트랜지션 목록에서 제외(기존 .aptLabel 규칙 무수정, 두 클래스 특이성으로 덮어씀). 부작용: new 라벨은 :hover 들림(-2px)이
      인라인 transform에 가려 미동작 — 바운스 중이라 시각적 손실 없음(의도된 트레이드).
    · 시안의 강조색 테두리(1.5px)는 이식 안 함(모션만) — 26_11 스파크 이식과 동일 원칙. new 빨강 표시는 기존 new 배지가 담당.
    · isNew는 거래량 모드 렌더(loadCurrentRangeData)에서만 true → 베이스/필터 모드 렌더엔 구조적으로 무영향.
    · 조정 손잡이: 속도 NEWTX_JELLY_PERIOD_MS(2400ms=시안 --spd 2.4s), 점프 높이/눌림 정도는 NEWTX_JELLY_KF 배열 값.
    · prefers-reduced-motion은 크레인/스파크와 동일하게 비활성 고정(newtxJellyReduceMotion=false, matchMedia 줄 주석 보존).
    · 합류 지점(가산만): drawMarkers(젤리 부착 분기 + startNewtxJellyClock 1줄), clearDrawn(activeNewtxJellies 비움 1줄) — 그 외 무수정.
  - [new 라벨 최전면] 라벨 겹침 시 new 라벨이 다른 라벨에 가려 바운스 효과가 반감되는 문제 → CustomOverlay zIndex 우선순위 부여.
    · const zIdx = 6 + count → (isNew ? 10006 : 6) + count 1줄 변경. 한 단지 기간 내 거래가 1만 건을 넘지 않으므로
      new 라벨은 항상 일반 라벨(6+count)보다 위. new 라벨끼리는 기존처럼 거래 건수 순 유지.
    · 거래량 모드에선 역세권·학군 오버레이가 강제 해제되므로(toggleTransactionMode) 경쟁 대상은 아파트 라벨뿐 — 타 오버레이 무영향.
  - 신규 식별자: TX_LABEL_FILL, NEWTX_JELLY_PERIOD_MS, NEWTX_JELLY_KF, activeNewtxJellies, newtxJellyEpoch, newtxJellyRafId,
    newtxJellyReduceMotion, newtxJellyPhaseNow, newtxJellyTransformAt, applyNewtxJellyFrame, attachNewtxJellyToLabel,
    newtxJellyTick, startNewtxJellyClock, CSS .aptLabel.newtx-jelly (모두 충돌 0건 확인).
  index_26_10.html → index_26_11.html
  - [분양 스파크(혜성 꼬리)] 분양 배지만으론 구분이 약해 시안 spark_label_demo.html ②(혜성 꼬리)를 지도 라벨에 '추가' 적용(배지 유지).
    · 병행 표시 손잡이: PRESALE_LABEL_STYLE 'badge' → 'badge+spark'(문자열 조합형). badge/spark는 includes()로 각각 판정,
      'crane'은 기존 정확일치 그대로(무수정). 배지 게이트 1줄만 === → includes('badge')로 변경(값이 조합형이 된 데 따른 필수 변경).
    · 구조: .aptLabel '첫 자식'으로 .bunyang-spark(래퍼, drop-shadow 잔광) > .bunyang-spark-ring(마스크 conic 링)을 insertBefore.
      시안은 스파크가 라벨 뒤(z-index:-1)에 깔리는 구조지만, 본 파일 라벨은 배경이 반투명(rgba 0.95)이고 :hover transform으로
      스택 컨텍스트가 바뀌어 그대로 이식하면 혜성 머리가 라벨 면으로 비침 → 마스크(content-box xor)로 중앙을 뚫어
      라벨 밖 '띠'만 그리는 방식으로 변경(스택 순서·라벨 투명도와 무관). conic 각도(꼬리 295°~, 머리 346~360° 흰색)는 시안 그대로.
      pointer-events:none + 띠가 텍스트/배지 영역 밖 → 클릭·줌이름갱신·배경 스파크라인 무영향(additive).
    · 회전은 CSS @keyframes가 아니라 JS 전역 시계(sparkEpoch, rAF)가 --spark-a를 매 프레임 갱신 — CustomOverlay
      재부착 위상 리셋 회피(크레인 craneEpoch·레이더 metroSweepEpoch와 동일 전략). 시안의 @property/rot 키프레임은 이식 안 함.
    · 잔광(시안 ::after blur 레이어)은 마스크가 blur 번짐을 잘라내는 문제로 래퍼의 drop-shadow로 대체(색·형태 동일 계열).
    · 조정 손잡이: 띠 두께 --spark-w(기본 3px), 잔광 반경 --spark-glow(5px), 색 --spark-accent(#9900FF, 분양 배지와 동일),
      속도 SPARK_PERIOD_MS(JS, 2400ms=시안 --spd 2.4s), 꼬리 길이는 .bunyang-spark-ring conic의 295deg 시작점(값↓=길어짐).
    · prefers-reduced-motion은 크레인과 동일하게 비활성 고정(sparkReduceMotion=false, matchMedia 줄 주석 보존).
    · 합류 지점(가산만): drawMarkers(스파크 부착 분기 + startSparkClock 1줄), clearDrawn(activeSparks 비움 1줄) — 그 외 무수정.
  - 신규 식별자: activeSparks, sparkEpoch, sparkRafId, SPARK_PERIOD_MS, sparkReduceMotion, sparkNode, sparkAngleNow,
    applySparkFrame, attachSparkToLabel, sparkTick, startSparkClock, CSS .bunyang-spark/.bunyang-spark-ring,
    --spark-w/--spark-glow/--spark-accent/--spark-a (모두 충돌 0건 확인).
  index_26_9.html → index_26_10.html
  - [대단지/신축 필터 활성화] '대단지'·'신축' 메인 버튼을 '준비 중'에서 실제 필터로 전환(브랜드∩역세권∩초등 교집합에 동일 합류).
    · 데이터 출처: 둘 다 MySQL(apt_master 울산 / apt_master_busan 부산). apt_coor.json엔 세대수도 준공년도도 없음
      (loadApts의 buildYear는 해당 키 부재로 항상 null이었음) → 전용 일괄 엔드포인트 신설.
    · 신규 PHP /api/apt_master_all.php: 두 테이블에서 apt_nm, sgg_cd, sds, build_year를 UNION ALL로 일괄 반환.
      init에서 loadAptMasterMeta() 1회 호출 → aptMetaMap(키 'normalizeName(이름)|sggCd' → {sds, buildYear}) 구성.
      매칭 키는 클릭 시 검증된 apt_meta.php의 '이름+구코드'와 동일 체계. 미매칭 단지는 세대수/준공 미상.
    · 대단지 패널(#bigList): 전체 / 100세대~ / 300세대~ / 500세대~ / 1000세대~ (data-sds, 0=전체).
      passBigFilter: 미선택/전체면 통과, 그 외 sds≥임계값(세대수 미상이면 제외).
    · 신축 패널(#newList): 전체 / ~3년 / ~5년 / ~7년 / ~10년 / ~15년 / ~20년 (data-age, 0=전체).
      passNewFilter: 미선택/전체면 통과, 그 외 (올해−build_year)≤기준년수(준공 미상이면 제외). 기준연도=페이지 로드 시점 연도.
    · UI/사이클은 역세권·초등 패턴 그대로(1클릭 ON+패널, 2클릭 패널만 닫기·필터 유지, 3클릭 미선택이면 OFF·선택이면 재오픈,
      선택 버튼 재클릭=해제). 지도 시각효과(레이더/학구도 등)는 없음 — 라벨 교집합만 좁힘.
    · 합류 지점(가산만, 기존 동작 불변): getCombinedAptCandidates(+passBig/passNew), hasAnyCombinedFilter(+isBigMode/isNewMode),
      syncFeatureButtonStates(+big/new), updateFilterPanelVisibility(+두 리스트), updateLeftUiPosition(+두 리스트 좌측 이동),
      사이드 메인버튼 핸들러('준비 중' 가드에서 big/new 제외 + 두 분기 추가), 서브버튼 핸들러 2벌, init(메타 로드+상태 초기화).
    · 상세 패널·fetchAptSds(클릭 1건 세대수 조회)는 무수정 — 요청 범위 밖.
  - 신규 식별자: APT_MASTER_ALL_API_URL, aptMetaMap, loadAptMasterMeta, getAptMasterMeta, NEW_FILTER_BASE_YEAR,
    isBigMode, isNewMode, bigSds, newAge, passBigFilter, passNewFilter,
    HTML #bigList/#newList, CSS .bigSdsBtn/.newAgeBtn (모두 충돌 0건 확인).
  index_26_8.html → index_26_9.html
  - [거래량 OFF 거래표] 지도에서 단지만 클릭(거래량 모드 미선택)해도 시세 추이 카드 아래에 '기간 내 거래 내역' 표를 노출.
    · 기존엔 updateSummaryHighlight가 isTransactionMode일 때만 표를 채우고, OFF면 tableSection에서 active를 떼 숨겼음.
      → OFF 분기를 renderNonVolumeTradeTable(ref) 호출로 교체. 거래량 모드(ON) 분기는 한 줄도 수정하지 않음(완전 별도 경로).
    · 표 내용: 켜진 면적 시리즈의 정확면적 합집합 거래만 최신순. 기본은 '최근 1개월치'(가장 최근 거래일 기준 1개월 전 같은 일자 이상)만 노출,
      '이전 거래 N건 더보기'로 전체, '감추기'로 다시 1개월. 행 포맷(거래일/금액/층/전용면적)은 거래량 표와 동일. (OFF 표에는 NEW 배지 미표시)
    · 토글은 동별표 .dap-table-toggle 스타일 재사용(신규 CSS는 빈 호스트 숨김 1줄뿐). 면적 변경/모드 전환 시 txTableExpanded=false로 1개월 접힘 복귀.
      펼침 토글 자체는 updateSummaryHighlight를 거치지 않고 renderNonVolumeTradeTable만 재호출 → 접힘 리셋 없이 펼쳐짐.
    · 비휘발 토글 잔상 방지: updateSummaryHighlight 표 블록 진입 시 txMoreHost를 1회 비움(양 모드 공통, 거래량 분기 내부 로직 무수정).
  - [기본 선택 면적 = 신규거래 면적대] 시세 추이 카드의 디폴트 면적을 '가장 작은 면적대'에서 '신규 거래가 난 면적대'로 변경.
    · buildSummaryChartCard의 selectedSeries 초기값(seriesSpecs[0].key 1개)만 computeDefaultSelectedSeries(seriesSpecs)로 교체.
    · 규칙: 거래량 모드 ON + summaryNewTxKeySet 비어있지 않음 + 클릭 단지 거래(summaryAllTrades)에 신규키 매칭이 있으면,
      그 거래의 정확면적이 속한 'OO㎡ 전체' 그룹(summaryRoundedGroups 기준)을 기본 선택. 여러 면적대면 해당 그룹들 모두.
      그 외(거래량 OFF / 신규정보 없음)는 기존과 동일하게 가장 작은 면적대(첫 시리즈) 1개로 폴백.
    · 신규키 대조용 makeSummaryTxKey는 loadCurrentRangeData의 makeTxKey와 필드 순서·정규화(normalizeName/valueTrim/normalizeDealAmount)를 완전히 동일하게 모듈 스코프로 1벌 둠(기존 두 지역 함수는 무수정).
  - 신규 식별자: renderNonVolumeTradeTable, computeDefaultSelectedSeries, makeSummaryTxKey, monthsBeforeYmd,
    ref 필드 txMoreHost·txTableExpanded, CSS .dap-summary-tx-more-host (모두 충돌 0건 확인).
  index_26_7.html → index_26_8.html
  - [분양 중 표시 전환] 지도 이름창의 '분양 중' 표시를 타워크레인 SVG → 라벨 '오른쪽 위 분양 글자 배지'로 전환.
    · 분양 배지(.bunyang-badge)는 기존 'new' 배지(.new-badge)와 동형: 폰트 크기(9px)·굵기(900)·깜빡임(newBadgeBlink 1s)
      전부 동일하게 맞추고, 위치만 좌상단(left:-4px) → 우상단(right:-4px), 색만 #9900FF(보라).
      → new는 좌상단·빨강, 분양은 우상단·보라로 한 라벨에 둘 다 떠도 위치+색으로 구분(한 단지가 신규거래+분양 중일 수 있음).
    · 키프레임은 newBadgeBlink 재사용(신규 @keyframes 없음). .aptLabel(position:relative) 기준 절대배치 + pointer-events:none → 클릭/줌/배경 스파크라인 무영향.
  - [표시 방식 손잡이] PRESALE_LABEL_STYLE 도입: 'badge'(분양 글자, 기본) / 'crane'(크레인) / 'off'(미표시).
    · drawMarkers에서 isNew 옆에 분양 중 판정을 isPresale로 1회 계산(트렌드 키 '정규화이름|시군구코드' + presaleAptKeys — 기존 26_7 판정 로직 그대로 재사용, 변경 0).
      'badge'면 labelHtml에 분양 span 추가, 크레인 부착(attachCraneToLabel)은 'crane'일 때만 호출하도록 게이트.
  - [크레인 보존] CSS .crane / .cr-* 블록, JS 구동부(craneNode·CRANE_*·craneTick·startCraneClock 등)와 attachCraneToLabel은 전부 그대로 둠(재사용 대비).
    기본값 'badge'에선 attachCraneToLabel이 호출되지 않아 activeCranes가 비어 startCraneClock도 안 돎(rAF 미가동) → 크레인 사실상 Off.
  - 신규 식별자: PRESALE_LABEL_STYLE, isPresale(drawMarkers 지역), CSS .bunyang-badge (모두 충돌 0건 확인). #9900FF 신규(기존 미사용).
  index_26_6.html → index_26_7.html
  - [분양권 라벨 크레인] 지도 이름창(.aptLabel) 위에 '분양 중'을 뜻하는 타워크레인 SVG를 올림(시안 crane_realsize.html 이식).
    · 분양권 판정: loadAptTrendData가 이미 받는 최근 24개월 거래(매매 data_* + 분양권 silv_*)에서
      단지별 출처를 집계(silvCntByApt/aptCntByApt) → '거래 1건 이상 & 전부 분양권(silv), 매매 0건'이면
      presaleAptKeys에 등록. 상세 패널의 분양권 판정 규칙(전부 _source==='silv')을 지도 라벨에 동일 적용.
      (24개월 창 기반이라 '최근 분양권 거래가 있는 = 분양 중'에 대응. 24개월 내 거래가 없는 휴면 단지는 미표시 — 의도된 동작)
    · 키 형식은 기존 트렌드 키와 동일('정규화이름|시군구코드') → drawMarkers에서 동일 키로 조회.
    · 첫 렌더 전에 loadAptTrendData가 await되므로(init) 첫 화면부터 크레인 노출, 이후 이동/줌/필터/거래량 재렌더에도 재부착.
  - [크레인 애니메이션 — rAF + 전역 epoch] Kakao CustomOverlay 재부착/재렌더 시 CSS 애니메이션 위상이 0으로 리셋되는 문제를
    역세권 레이더(metroSweepEpoch)와 동일하게 해결. CSS @keyframes를 쓰지 않고 JS가 단일 전역 시계(craneEpoch, 최초 1회 고정)로
    매 프레임 모든 크레인의 후크 scaleY·층 opacity/translateY를 직접 구동 → 라벨이 매 idle마다 재생성돼도 위상이 항상 일치.
    · 시안의 @keyframes hoist/a1~a4를 키프레임 배열(CRANE_HOOK_KF + 층별 등장 타이밍)로 옮겨 동일한 후크 상하·층 1→4 적층 연출 재현.
    · 표시 중 크레인이 없으면(activeCranes 비면) 루프 자동 정지. prefers-reduced-motion이면 정적(전 층 표시·후크 정지) 1회 적용.
    · 조정 손잡이: 크기 --crane-scale(.crane, 기본 0.6), 색 --crane-accent(.crane, 기본 #ff9d2e/주황), 속도 CRANE_PERIOD_MS(JS, 기본 7000).
  - 크레인은 .aptLabel 안에 position:absolute + pointer-events:none 자식으로 부착(라벨 위로 오버플로) → 클릭/줌이름갱신/배경
    스파크라인(.apt-name-text·dataset·has-trend) 로직 전부 무영향. 라벨 스타일 자체는 무수정(additive).
  - 신규 식별자: presaleAptKeys, silvCntByApt/aptCntByApt(loadAptTrendData 지역),
    activeCranes, craneEpoch, craneRafId, CRANE_PERIOD_MS, craneReduceMotion, craneNode, cranePhaseNow,
    CRANE_HOOK_KF, easeInOutCrane/easeOutCrane, craneHookScale, craneFloorState, attachCraneToLabel, craneTick, startCraneClock,
    CSS .crane / .crane .cr-hook / .cr-cable / .cr-floor / .cr-bldg / .cr-wd / .cr-fill (모두 충돌 0건 확인).
  index_26_5.html → index_26_6.html
  - [시세 추이 면적 버튼 전체 해제] 버튼 클릭으로 모든 면적을 해제할 수 있도록 변경(마지막 1개 유지 가드 제거).
    · renderSummaryAreaButtons 클릭 핸들러에서 `if (isOn && selectedSeries.size === 1) return;` 삭제.
    · 0개 선택 시 빈 차트 허용(applySummaryAreaVisibility가 전부 hidden 처리, 크래시 없음).
    · 0개일 때 거래표 제목을 '기간 내 거래 내역'으로(기존 '· 0개 비교' 어색함 제거).
  - [상세 패널 뒤로가기] 상세 패널이 떠 있을 때 모바일/브라우저 '뒤로가기'가 페이지를 이탈하던 문제 해결.
    · openDongAreaPanel: 패널 열 때 history.pushState({dapPanel:true}) 1회(단지 전환 시 중복 push 안 함, dapHistoryPushed 가드).
    · popstate 리스너: 패널이 열려 있으면 closeDongAreaPanel(true)로 패널만 닫음(페이지 유지).
    · closeDongAreaPanel(fromPopstate): 닫기 버튼 등 직접 닫을 땐 history.back()으로 쌓은 항목 소비, 뒤로가기로 닫힐 땐 재호출 안 함.
    · 모바일/데스크탑 공통 적용(단일 페이지라 뒤로가기로 패널 닫기가 더 유용).
    · 신규 식별자: dapHistoryPushed (충돌 0건 확인).
  - [시세 추이 면적 행 펼치기/접기] 면적 행이 많은 단지(예: 해운대 아이파크 ~40행)에서 차트가 아래로 밀리던 문제 해결.
    · 기본 3행만 노출하고 나머지는 숨김, '면적 N행 더 보기'/'접기' 토글로 전체 표시.
    · 동별 테이블 토글(.toggle-arrow + SVG 삼각형) 패턴을 미러링(.dap-summary-rows-toggle / .dap-rows-collapsed).
    · 토글은 areaTabs의 형제(filterBox 내)라 nth-child(n+4) 행 숨김 계산에 영향 없음. 행 3개 이하면 토글 숨김.
    · 카드가 단지마다 새로 생성되므로 기본 접힘(3행)이 매번 초기화됨.
    · 신규 식별자: SUMMARY_ROWS_ARROW_SVG, updateAreaRowsToggle, areaRowsToggle, areaRowsCollapsed (충돌 0건 확인).
  index_26_4G.html → index_26_5.html
  - [시세 추이 면적 버튼 취소선] 비선택 버튼을 분양권 프리미엄 범례(.bunyang-leg-item.off)와 동일하게 취소선 처리.
    · .dap-summary-area-btn:not(.active)에 text-decoration:line-through 추가.
    · 색상점(.dap-summary-color-dot)은 atomic inline(inline-block)이라 취소선이 적용되지 않아 색이 그대로 보임.
    · 패널 기본 선택이 '첫 번째 전체 1개'라 처음엔 나머지 버튼이 모두 취소선으로 표시됨(의도된 동작).
  - [시세 추이 면적 버튼 폭 자동화] 고정 118px가 활성(굵게) 글씨·3자리 이상 건수에서 '전체' 글자를 …으로 자르던 문제 해결.
    · 원인: 버튼이 width 118px 고정인데 .active의 font-weight:700로 글자가 굵어지거나 건수 칸(auto)이 3자리로 넓어지면
      라벨 칸(1fr)이 줄어 text-overflow:ellipsis가 작동. (활성=굵기 / 3자리 건수=공통)
    · 해결: renderSummaryAreaButtons에서 canvas measureText로 라벨(700/11.5px)+최대 건수(600/10px) 폭을 측정해
      --summary-button-width를 동적 산정(measureSummaryButtonWidth). 기존 118px는 측정 실패 시 폴백으로 유지.
    · 건수는 표시 가능한 최댓값인 전체 거래건수(spec.count) 기준으로 측정 → 기간 슬라이더 조작 후에도 안 잘림.
  - [시세 추이 전체선 색상] 모든 '전체' 버튼/라인이 민트(#00E5CC) 하나였던 것을 민트→피치→핑크… 순으로 구분.
    · 원인: buildSummarySeriesSpecs가 group 시리즈 색을 '#00E5CC'로 하드코딩.
    · 전체(group): SUMMARY_GROUP_PALETTE(['#00E5CC']+SUMMARY_PALETTE)에서 groupIdx 순으로 배정(getSummaryGroupColor).
    · 정확 면적: 팔레트 시작점을 전체가 쓴 색 개수(groupCount-1)만큼 뒤로 밀어(exactStyleOffset) 전체선과 색 충돌 회피.
    · 점=라인 동일 색이라 버튼·차트 모두 적용. (단지 시리즈가 9개를 초과할 때만 팔레트 순환으로 색이 재사용될 수 있음)
    · 신규 식별자: SUMMARY_GROUP_PALETTE, getSummaryGroupColor, measureSummaryButtonWidth, SUMMARY_BTN_FONT_FAMILY, exactStyleOffset (충돌 0건 확인).
  index_26_3.html → index_26_4.html
  - [시세 추이 면적 버튼 크기] 분양가·프리미엄 면적 버튼과 높이·안쪽 여백·글자 크기·건수 글자 크기를 동일하게 맞춤.
    · 기존 고정 높이 30px를 제거해 시세 추이 버튼이 과도하게 커 보이던 문제를 수정.
  index_26_2.html → index_26_3.html
  - [시세 추이 면적 버튼 스크롤] 면적대별 행은 유지하되 행마다 있던 가로 스크롤 3개를 제거하고, 면적 버튼 영역 전체에 가로 스크롤 1개만 적용.
  - [시세 추이 면적 버튼 정렬] 모든 행이 동일한 고정 열 너비를 사용하도록 변경하여 68㎡·84㎡·121㎡ 행의 버튼 오와 열을 맞춤.
  - [시세 추이 면적 버튼 색상] 선 모양 미리보기 대신 분양가/프리미엄 범례와 같은 컬러 점으로 시리즈 색상을 표시.
    · 비활성 버튼에서도 고유색 점은 유지해 면적별 색상 구분이 한눈에 보이도록 함.
  index_26_1.html → index_26_2.html
  - [시세 추이 면적 버튼 행 정렬] 정수 면적대별로 한 행씩 구성.
    · 68㎡ 전체 + 68㎡ 세부면적은 1행, 84㎡ 전체 + 84㎡ 세부면적은 1행, 121㎡ 전체 + 세부면적은 1행.
    · 행 사이에는 구분선을 두고, 한 행이 패널 폭을 넘을 때만 해당 행을 가로 스크롤.
  - [시세 추이 거래 건수] 버튼의 N건을 전체 로드 기간 고정값에서 현재 차트 기간 bar 범위의 거래 건수로 변경.
    · 양끝 핸들 및 1년/2년/3년/5년/전체 프리셋 조작 시 즉시 재계산.
  index_26.html → index_26_1.html
  - [시세 추이 면적 선택] 68㎡/84㎡/121㎡ 상위 카테고리 탭을 제거하고 모든 시리즈 버튼을 하나의 목록으로 평탄화.
    · 68㎡ 전체를 켠 상태에서도 84.814㎡, 121.42㎡ 등 다른 면적대의 정확 면적을 동시에 선택·비교 가능.
    · 그룹 전체선은 민트색 + 선 패턴, 정확 면적선은 기존 팔레트 + 선 패턴 조합으로 구분.
    · 거래량 모드의 강조점·기간 내 거래표는 현재 켜진 모든 버튼의 면적 합집합과 연동.
  index_25_1G.html → index_26.html
  - [상세 패널 시세 추이] 면적대별로 반복되던 여러 차트 카드를 단일 차트 탐색형 UI로 통합.
    · 1단계: 68㎡ / 84㎡ / 121㎡ 등 면적대 탭(단일 선택)
    · 2단계: 면적대 안의 전체 + 정확한 전용면적 버튼(복수 선택)
    · 면적대 전환 시 차트·기간 bar·거래 내역 표를 같은 카드 안에서 갱신하여 세로 스크롤을 축소.
  - [시세 추이 선 구분] 팔레트 색상과 실선/긴 점선/점선/일점쇄선을 조합해 면적 종류가 많아져도 구분 가능.
  - [거래량 연계] 거래량 모드의 기간 강조·NEW 배지·기간 내 거래 내역 표를 새 단일 차트와 연동.
    · '전체'가 켜져 있으면 해당 면적대 전체 거래, 정확 면적만 켜져 있으면 선택 면적 거래만 표에 표시.
  - [기간 bar] 면적대 전환 뒤에도 1년/2년/3년/5년/전체 프리셋 선택을 유지.
  index_25.html → index_25_1.html
  - [상세 패널 기간 bar] 초기 표시 범위를 최근 5년으로 변경.
    · 원본 데이터 기간이 5년 이하인 차트는 자동으로 전체 범위를 표시.
    · 시세 추이·동별 가격 비교·분양가/프리미엄 기간 bar에 동일 적용.
  - [기간 프리셋] 기존 1년 / 2년 / 3년 / 전체에 5년 버튼 추가.
  index_24_3.html → index_25.html
  - [상세 패널 지역별 조회] fetchAllTradesForApt가 클릭 단지의 sggCd를 기준으로 거래 파일 경로를 선택.
    · 울산(31xxx): ../data/apt + ../data/silv만 조회
    · 부산(26xxx): ../data/busan/apt + ../data/busan/silv만 조회
    · 기존처럼 양 지역 4종 파일을 모두 받은 뒤 sggCd로 버리는 낭비 제거.
  - [상세 패널 단계 표시] 거래 데이터 도착 즉시 '시세 추이'를 먼저 생성하고 화면에 반영한 뒤,
    다음 이벤트 루프에서 매매 단지는 '동별 가격 비교', 분양권 단지는 '분양가/프리미엄'을 이어서 생성.
    · 시세 추이가 후속 섹션의 계산·분양가 JSON 로드를 기다리지 않음.
    · 거래 1회 로드 후 각 섹션이 같은 trades 배열을 재사용하는 기존 구조는 유지.
  index_24_2.html → index_24_3.html
  - [라벨 떡칠 완화] 베이스(무필터) 모드에서 거래량 기반 줌-단계 노출 도입.
    줌을 뺄수록(레벨↑) 최근 거래량 높은 단지만 보이고, 확대(레벨↓)하면 전부 표시.
    · 신호: loadAptTrendData(startup, 부산 포함)가 미니차트용으로 계산하던 단지별 거래 건수를
      그동안 버렸는데, 이제 aptTradeCntMap(최근 24개월·매매+분양권·전 면적)으로 함께 보존.
      → 데이터 추가/지연/속도 영향 0. 84타입 필터 '전'에 집계하므로 미니차트 로직 무수정.
    · 적용: drawMarkers에서 overlay.setMap을 shouldShowAptLabel(a, currentLevel) 결과로 분기.
      베이스 모드는 idle에서 재그리기되므로 이 한 곳만으로 줌마다 자동 재평가(확대 시 재노출).
    · 범위 한정: isLabelDeclutterActive()로 '거래량/필터/역세권/학군 모드'는 전부 제외 → 기존 동작 보존.
    · 안전: aptTrendLoaded=false(데이터 미도착/실패)면 숨김 안 함 → 라벨 사라짐 사고 방지.
    · 조정 손잡이: LABEL_MIN_TRADE_TIERS의 min 값(레벨별 최소 거래 건수)만 바꾸면 강도 조절.
  - [표기 이름 축약 허용] 지도 라벨의 표기 이름(dispNm)도 일반 이름과 동일하게 truncateAptName 적용
    (줌 6글자 절단). 초기 렌더/줌 재렌더 두 곳에서 truncateAptName이 삼항식을 감싸도록 변경.
  - 신규 식별자: aptTradeCntMap, LABEL_MIN_TRADE_TIERS, labelMinTradeForLevel, aptRecentTradeCount,
    isLabelDeclutterActive, shouldShowAptLabel, cntByApt (모두 충돌 0건 확인).
  index_24_1.html → index_24_2.html
  - [지도 표기 이름] apt_coor.json에 "표기 이름"(선택) 필드 지원 — 지도 라벨에만 적용,
    데이터 조회(아파트 이름)와 완전히 분리.
    · loadApts: pick(it, ["표기 이름", ...])로 읽어 apt 객체에 dispNm 추가 (없으면 null, 순수 additive).
      aptNm은 그대로 — 거래량 매칭(normalizeName)·상세 패널 조회(openDongAreaPanel)·
      미니 트렌드 키(applyTrendBgToLabel)·브랜드 판정(getAptBrand)은 전부 aptNm 사용 → 무영향.
    · drawMarkers 라벨 텍스트(.apt-name-text): dispNm 있으면 그대로, 없으면 기존 truncateAptName.
      dispNm은 사용자가 직접 다듬은 이름이라 줌 6글자 자동 절단을 적용하지 않음(원문 그대로 표기).
    · contentDiv.dataset.aptnm은 그대로 두고(원본 보존), dispNm 있을 때만 dataset.dispnm 추가.
      zoom_changed 핸들러: dispnm 있으면 그대로, 없으면 기존 truncateAptName(origName) — 기존 동작 보존.
    · 시세 추이·동별 비교·분양가/프리미엄 로직 무수정.
  - 신규 식별자: dispNm(apt 객체 필드), dataset.dispnm (충돌 0건 확인).
  index_24.html → index_24_1.html
  - [명단 API 은퇴] apt_dong_area.php / silv_area.php(action=list) 의존 완전 제거
    · 두 PHP의 유일한 호출처 ensureDongAreaAptList와 부속 일괄 삭제:
      fetchDongAreaJson, findDongAreaMatch, setDongAreaSelectValue, renderDongAreaSelect,
      makeDongAreaOptionLabel, DONG_AREA_API_URL/SILV_AREA_API_URL 상수, dongAreaAptList 변수
    · openDongAreaPanel: 명단 매칭 단계 제거 → 클릭 메타로 바로 loadAndRenderDongArea 호출
      (패널 첫 오픈 시 PHP 왕복 1회 제거)
    · 이제 두 PHP는 어디서도 호출되지 않음 → 추후 서버(닷홈)에서 파일 삭제 가능
  - [드롭다운 제거] 패널 상단 아파트 선택 select(#dapAptSelect)의 마크업·전용 CSS·
    change 리스너 삭제 (index_20_6에서 display:none으로 숨겨 뒀던 DOM을 완전 제거,
    지도 클릭이 유일한 진입 경로)
  - [분양권 판정 전환] 명단 _source → 거래 출처(폴더 신분증)
    · loadAndRenderDongArea: 거래 도착 후 '1건 이상 & 전부 _source===silv'면 분양권
    · 매매 거래가 하나라도 섞이면 매매 취급 (기존 명단 중복제거 규칙과 동일 기준)
    · 울산·부산 동일 메커니즘 → 부산 분양권이 매매로 오인되던 문제(index_24) 해결
  - [헤더 부제목 보강] 거래 도착 후 분양권 배지·준공년도 반영
    · 준공년도: 거래 레코드의 buildYear에서 추출 (매매 거래만 보유, 분양권 거래엔 없음
      → 분양권 단지는 기존 명단 방식과 동일하게 연도 미표시)
    · sds(세대수)·_source(분양권)·buildYear(준공년도)를 공유 normalizedMeta에 기록 후
      setDongAreaTitle(normalizedMeta) 재호출 — 두 비동기(세대수 MySQL / 거래 JSON)의
      도착 순서와 무관하게 부제목 조각이 서로를 지우지 않음
    · sds 콜백의 spread 전달({...meta, sds})도 공유 메타 기록 방식으로 통일
    · 늦은 응답 가드: currentDongAreaMeta 동일성 확인 후에만 제목 갱신 (기존 sds 가드와 동일 취지)
  index_23_1.html → index_24.html
  - [부산 확대] 울산 전용 → 울산 + 부산 동시 운용. 좌표 파일(../map/apt_coor.json)에
    부산 단지가 이미 통합돼 있어 base 지도 마커는 자동 표시(추가 코드 없음).
    부산/울산은 sggCd로 구분(부산 26xxx / 울산 31xxx)되어 데이터가 섞이지 않음.
  - [구 매핑] sggCdToGu()에 부산 16개 시군구 코드(26110~26710) 추가
    → 부산 단지도 상세 패널·옵션 라벨에 구 이름 표시 (안 넣으면 공란).
  - [상세 패널 거래] fetchAllTradesForApt(): ../data/busan/apt|silv/ 파일도 함께 로드.
    sggCd 필터(기존 로직)로 클릭한 단지의 지역 거래만 매칭 → 울산과 안 섞임.
    부산 단지 클릭 시 시세 추이·동별 비교·분양가/프리미엄 차트 정상 동작.
  - [미니 트렌드] loadAptTrendData(): ../data/busan/apt|silv/ 파일도 함께 로드.
    집계·조회 키가 'aptNm|sggCd' 복합키라(기존) 부산 라벨도 자기 스파크라인만 표시.
  - [거래량 패널 지역 토글] 패널 상단에 '울산 ⚪ 부산' 슬라이딩 스위치(#txRegionSwitch) 추가.
    · 상세 패널 분양가/프리미엄 스위치(.bunyang-view-switch)와 동일한 형태, 활성색은 민트(--mint-deep).
    · 선택 지역만 로드: 울산=../data, 부산=../data/busan (txBase). _old 백업 파일도 동일 base.
    · 동명 단지가 타 지역에 있어도 오표시 방지 — 마커 대상을 선택 지역(sggCd) 단지로 한정
      (isBusanSgg: 26000~26999). 토글 전환 시 loadCurrentRangeData() 재호출.
  - 신규 식별자: txRegion, txBase, isBusanSgg, regionApts, #txRegionSwitch,
    .tx-region-row / .tx-region-switch / .rs-label / .rs-track / .rs-knob (모두 충돌 0건 확인).
  - 좌표 로드(loadApts)·base 마커 렌더·역세권/학구도·기타 로직 무수정 (additive).
  index_23.html → index_23_1.html
  - [세대수] 상세 패널 헤더 부제목에 세대수 표시 (남구 · 야음동 · 2018년 준공 · 1,234세대)
    · 출처: MySQL apt_master.sds — 신규 PHP /api/apt_meta.php(아파트명+구코드 조회)
    · fetchAptSds() 추가: apt_meta.php 호출해 sds 반환 (없으면 null, 실패해도 무시)
    · loadAndRenderDongArea: 패널 열 때 비차단으로 조회 → 도착 시 setDongAreaTitle에 sds 합쳐 갱신
      (단지 전환 가드: 응답 늦게 와도 다른 단지 제목 안 덮어씀)
    · setDongAreaTitle: meta.sds 있으면 'N세대'(천단위 콤마) 추가
    · 거래/동별/분양가 로직 무수정 — 헤더에 세대수만 더함
  index_22_2.html → index_23.html
  - [동별 비교] 데이터 출처 item.json → data_*.json 전환 (Route1, 매일 갱신 반영)
    · buildAreasFromTrades() 추가: 거래 → 동별표(areas) 변환 (PHP pivot 로직 JS 이식)
    · loadAndRenderDongArea: apt_dong_area.php(action=data) 호출 제거
      → fetchAllTradesForApt 거래 1회 로드로 동별표·종합차트 동시 생성 (중복 fetch/pivot 제거)
    · 제목은 normalizedMeta 기준 (item.json 메타 의존 제거)
    · renderDongAreaTable/buildDongAreaChart 무수정 (areas 형태 PHP와 동일)
  index_21.html → index_22.html
  - [분양가 스키마 전환] 분양가 JSON을 압축형(types/floors/used_price)에서
    동·호·층별 평면 레코드 배열로 전면 교체
    · 레코드 7필드: {dong, ho, floor, type, area, price, status}
    · status: '분양'(price 있음) / '분양 대상 아님'(조합원 매물 등, price=null)
    · buildBunyangIndex(): 평면배열 → {areaList, lookup(Map)} 인덱스 구축
      - 분양가 계산은 status==='분양' && price!=null 인 레코드만 사용
      - lookup 키 = `${area4}|${floor}`, 값 = {used, kind, n, items[{d,h,p}]}
      - kind: 'official'(단일가=정확) / 'average'(복수가=세대수 가중평균)
      - 세대수 가중평균: Σprice/n (호수만큼 반영, 라인 대표가 평균과 다름)
  - [분양가 매칭] 국토부 실거래(전용면적 4자리 + 층)로 (area, floor) 조회
    · bunyangMapTrades(): 면적+층 매칭, missing(분양가 없음)도 결과 포함
    · 면적은 분양됐지만 해당 층이 조합원만 있으면 → missing
    · 분양 데이터에 없는 면적(특수타입 등) → missing
  - [분양가 차트] 거래 출발점 마커 3종
    · official=꽉 찬 세모 ▲ / average=속 빈 세모 △ / missing=세모·점선 없음
    · 프리미엄 보기에선 missing 거래 제외(계산 불가)
  - [분양가 툴팁] 분양가 전용 external tooltip 신설(getBunyangTooltipEl)
    · 시세 추이 툴팁과 동일한 알파(0.22)/경계선/그림자, 배경=면적 타입색
    · average면 동·호별 분양가 전체 나열(동→호 순), 길면 툴팁 내부 스크롤
    · missing이면 "분양가 데이터 없음"
  - [분양가 파일 매핑] 라엘에스 → LALS.json 추가
    (기존: 한화포레나 울산무거 → HANHWAFORENA_MUGEO.json,
           번영로 하늘채 라크뷰 → BEONYEONGRO_HANULCHE_LAKEVIEW.json)
  - [디자인 개선 — 시안 AC 믹스]
    · 보기 전환을 버튼 2개 → 스위치 토글(분양가 ⚪ 프리미엄, 미니차트 토글 스타일)
    · '표시 중 평균' chip 삭제, 분양가 보기 y축 '금액' 라벨 삭제(차트 폭 확보)
    · 층 구분 탭: 3열 그리드(5탭이 3+2행), 라벨+건수 가로 배치, 좁은 화면 2열
    · 평형 범례: 2행 + 가로 스크롤(grid-auto-flow:column)
    · 층 버튼 크기·글자를 평형 버튼과 통일
    · '20층 이상' → '20층~' 표기
    · "표시 건수 + 보기 토글"을 필터 묶음 아래·차트 바로 위로 이동

  index_20_6.html → index_21.html
  - [분양권 상세] 분양권(_source==='silv') 단지는 "동별 가격 비교" 섹션 삭제
    (분양권 거래는 동 정보가 없어 동별 비교가 무의미)
  - [분양권 상세] 대신 "분양가 / 프리미엄" 비교 섹션 추가 (기존 v06 시안 이식)
    · 단일 통합 차트 + 면적 타입 토글(범례 클릭 on/off)
    · 분양가 보기 ↔ 프리미엄 보기 토글
    · 층 구간 탭 자동 생성 (분양가 데이터의 가격 평탄 경계 기반)
      → 1~(경계-1) / 경계~9 / 10~19 / 20층~ , 단지마다 경계 자동 산출
  - [분양가 데이터] ../data/silv/{파일}.json 로드 (BUNYANG_FILE_MAP 매핑)
    · 한화포레나 울산무거 → HANHWAFORENA_MUGEO.json
    · 번영로 하늘채 라크뷰 → BEONYEONGRO_HANULCHE_LAKEVIEW.json
    · 분양가 파일 없으면 섹션 자동 숨김 (매매 단지는 영향 없음)
  - 거래 데이터는 기존 fetchAllTradesForApt 결과 재사용 (추가 fetch 없음)
  - [분양권 상세] 분양가/프리미엄 차트에 기간 조정 슬라이더 추가
    · 시세 추이와 동일한 xrange UI(createXRangeSliderDOM) 재사용
    · 차트가 층/면적/보기 전환마다 재생성되므로 선택 기간 비율(xrMin/xrMax)을
      위젯 상태로 보존 → 재생성 후 applyXRange()로 복원
    · 프리셋(1년/2년/3년/전체) + 양끝 핸들 드래그 지원

  index_mix_11_9.html → index_mix_12.html
  - [역세권] metro.json 기반 역 위치 표시 (파란 마커 + 라벨)
  - [역세권] 반경 원 + 물방울 리플 애니메이션 (1.2초 간격 반복)
  - [역세권] 거리 선택 버튼 (100m / 200m / 300m / 400m / 500m)
  - [역세권] 반경 내 아파트 자동 표시 + 펄스 애니메이션
  - [역세권] 반경 변경 시 아파트 목록 재계산
  - [역세권] Haversine 공식으로 좌표 간 거리(m) 계산

  index_mix_12_1.html → index_mix_12_2.html
  - [모바일] 동/평형 테이블: 가격이 바로 보이도록 min-width 제거 & 축소 레이아웃 적용
  - [동/평형] 차트 위에도 전용 면적 배지 표시
  - [모바일] 거래량 패널 접기/펼치기 토글 (화살표만 표시)
  - [역세권] 법적 효력 없음 + 오차 안내 경고 배너 추가 (font-size 13px/12px)
  - [역세권] 화면 밖 아파트에도 펄스 애니메이션이 적용되도록 수정 (DOM쿼리→drawn배열 직접접근)
  - [모바일] 거래량 패널 컨트롤 영역 축소 (패딩/폰트/핸들 축소)
  - [모바일] 패널 숨김 시 완전히 사라지고 떠다니는 원형 ▲ 버튼만 표시
  - [모바일] 패널 내부 토글 바 제거 → 패널 위에 떠다니는 원형 ▼ 버튼으로 대체
  - [모바일] 거래량 패널 컨트롤 영역 타이트하게 축소 (패딩/마진/폰트 줄임)
  - [모바일] 패널 숨김 시 완전히 숨기고 떠다니는 ▲ 원형 버튼으로 복원

  index_mix_12_2.html → index_mix_13.html
  - [동/평형] 전용면적별 종합 시세 차트 추가 (아파트 선택 드롭다운과 면적별 카드 사이)
  - [동/평형] 종합 차트: 모든 거래 데이터 포함 (동 정보 없는 거래 포함)
  - [동/평형] 종합 차트: 전용면적별 라인, Y축 억 단위, X축 YYYY.MM
  - [동/평형] 종합 차트 하단 거래 테이블: 거래량 모드 기간 내 데이터만 표시
  - [동/평형] 종합 차트: 거래량 기간 내 데이터 포인트 강조 표시 (큰 마커)
  - [동/평형] 종합 차트: 비슷한 면적 그룹별 개별 차트 분리 (정수 반올림 기준)
  - [동/평형] 종합 차트: 음영(fill) 제거, 이동평균 없이 원본 데이터만 표시
  - [동/평형] 종합 차트: 라인 끝 면적 라벨 제거 → 범례로 대체, 차트 좌우 넓게
  - [동/평형] 동별 거래 테이블: 기본 5행만 표시 + 펼치기/접기 토글 버튼
  - [동/평형] 종합 차트: 면적 그룹핑 기준 변경 (Math.round → ±1 범위 클러스터링)
  - [동/평형] 동별 차트 범례: onHover 하이라이트와 onClick 토글 충돌 버그 수정
  - [동/평형] 종합 차트: 개별 거래를 점(scatter)으로, 이동평균선 추가 (호갱노노 스타일)
  - [동/평형] 종합 차트: x축을 월별→일별로 변경 (같은 달 다른 날짜 거래가 수평 분포)
  - [동/평형] 종합 차트: '전체' 통합 라인 디폴트 표시, 개별 면적은 디폴트 숨김 (범례 클릭 토글)
  - [동/평형] 종합 차트: 범례 토글 버그 수정 (dataset.hidden vs meta.hidden → isDatasetVisible 사용)
  - [전체] 컬러 팔레트 교체 (9색: 청록/주황/핑크/라임/퍼플/옐로우/스틸블루/올리브/그레이)
  - [동/평형] 종합 차트: 전체 라인 색상을 청록(#00E5CC)으로 변경, 개별 면적은 주황부터 시작

  index_mix_13_F.html → index_mix_14.html
  - [동/평형] 동별 차트: showLine 연결선 → scatter 점(반투명) + 동별 이동평균선(MA, 월평균 기준 trailing 3개월) 방식으로 변경 (시세 추이 그래프 동일 스타일)
  - [동/평형] 동별 차트: 범례 클릭 시 dot+MA 쌍 토글, hover 시 해당 동 MA 강조 하이라이트

  index_mix_14.html → index_mix_14_1.html
  - [동/평형] 동별 차트: MA_WINDOW 3→6 (6개월 이동평균, 이상치 희석)
  - [동/평형] 동별 차트: tension 0.3→0.5 (bezier 보간 강화, 꺾임 완화)

  index_mix_14_1.html → index_mix_14_3.html
  - [동/평형] 동별 차트: MA/EMA 완전 제거 → 월별 실평균값을 tension Bezier 곡선으로 시각적 스무딩 (수학적 평균 없이 실거래가 그대로 반영, 거래 드문 동도 실제 현재가 유지)

  index_mix_14_3.html → index_mix_14_4.html
  - [동/평형] 종합 시세 추이 차트: trailing MA → 월별 실평균 + monotone Bezier 방식으로 동일하게 변경 (computeMA/MA_WINDOW 제거, computeMonthlyAvg로 교체)

  index_mix_14_4.html → index_mix_14_5.html
  - [동/평형] 동별 차트: x축 type:category → type:linear(timestamp) 전환 (실제 날짜 간격 반영, 거래 없는 기간은 빈 공간으로 표시)

  index_mix_14_5.html → index_mix_14_6.html
  - [동/평형] 동별 차트: 서식을 시세 추이 차트와 통일 (layout padding, 범례 padding·숨김색, y축 억단위, tooltip 만원+억 병기, x축 여백 0.02)

  index_mix_14_6.html → index_mix_14_7.html
  - [동/평형] 동별 차트: 월평균 포인트에 3점 중심 이동평균 적용 (개별 거래가 아닌 집계값 기준 → 저가 왜곡 없이 시세 추이와 유사한 부드러운 곡선)
  - [동/평형] 동별 차트: cubicInterpolationMode:monotone 제거 → bezier tension:0.5로 더 자유로운 곡선

  index_mix_14_7.html → index_mix_14_8.html
  - [동/평형] 동별 차트: 날짜 파싱 버그 수정 (YYYY.MM 오해 → YY.MM.DD 정확 파싱, 실제 거래일 timestamp 사용)
  - [동/평형] 동별 차트: 월별 평균 집계 로직 재작성 (rows의 실제 날짜로 월 그룹핑 → dot은 실거래일, 라인은 월평균)

  index_mix_14_8.html → index_mix_14_9.html
  - [동/평형] 동별 차트: dateStrToNum 연도 파싱 버그 수정 (year<100이면 +2000 보정, new Date(22,...) → 1922 오파싱 해소)
  - [동/평형] 동별 차트: YY.MM / YYYY.MM / YY.MM.DD 세 가지 형식 모두 올바르게 처리

  index_mix_14_9.html → index_mix_14_10.html
  - [동/평형] 동별 차트: dateStrToNum을 ISO 문자열 방식으로 교체 (new Date(year,...) 0~99년도 오파싱 원천 차단)
  - [동/평형] 동별 차트: cubicInterpolationMode:monotone 재추가 (tension 오버슈트로 인한 수직 낙하선 방지)

  index_mix_14_10.html → index_mix_14_11.html
  - [동/평형] 동별 차트: 3점 중심 이동평균 제거 → 시세 추이 computeMonthlyAvg와 완전히 동일한 방식(월평균 그대로)으로 통일

  index_mix_14_11.html → index_14.html
  - [거래량] data.php _old 백업 연동: 거래량 표시 시 data_YYYY_MM_old.json과 비교하여 신규 거래 아파트에 "new" 배지 표시
  - [거래량] silv.php _old 백업 연동: silv_YYYY_MM_old.json도 동일하게 비교하여 분양권 신규 거래도 "new" 배지 반영
  - [거래량] .new-badge CSS 추가 (아파트 라벨 좌측 상단 빨간 new 텍스트, 반짝임 애니메이션)

  index_14.html → index_14_1.html
  - [x축 슬라이더] 시세 추이 차트/동별 차트 각 카드 하단에 x축 범위 조절 슬라이더 추가 (양쪽 핸들 드래그)
  - [x축 슬라이더] 1년 / 2년 / 3년 / 전체 프리셋 버튼 추가 (선택 범위에 따라 active 상태 자동 반영)
  - [x축 슬라이더] 슬라이더 조작 시 해당 차트의 x축 min/max만 갱신, 다른 차트·기존 기능에는 영향 없음
  - [x축 슬라이더] 차트에 _dataMinX/_dataMaxX 원본 데이터 범위 저장 (pad 미포함)

  index_14_1.html → index_14_2.html
  - [라벨] 지도 줌 level 5 이상일 때 아파트 이름을 앞 6글자로 제한 (긴 이름 겹침 해소)
  - [라벨] LABEL_LEN_LIMIT_LEVEL / LABEL_LEN_LIMIT_CHARS 상수로 임계값 조정 가능
  - [라벨] 마커 라벨의 이름 부분을 .apt-name-text span으로 감싸 줌 변경 시 textContent만 갱신
  - [라벨] contentDiv에 dataset.aptnm으로 원본 이름 보존 (new-badge / count-badge 동작 유지)
  - [라벨] map zoom_changed 리스너 추가: drawn 배열 순회하여 라벨 이름 부분만 즉시 갱신

  index_14_2.html → index_14_3.html
  - [폰트] Pretendard Variable 웹폰트를 <head>에 preconnect + <link>로 로드 (jsdelivr CDN)
  - [폰트] body font-family 스택 맨 앞에 'Pretendard Variable' 추가 → PC/모바일/OS 관계없이 동일 렌더링
  - [폰트] .aptLabel / .metroLabel / Canvas 차트 끝점 라벨의 'system-ui' 스택에도 Pretendard 추가
  - [화살표] ▼ 유니코드 → 인라인 SVG 삼각형으로 일괄 교체 (OS 의존 제거)
    · 좌측 필터 6개 버튼 (브/역/대/신/평/초)
    · 거래량 토글 ◀ (btnTransaction)
    · 모바일 패널 ▼ 최소화(tp-minimize-btn) / ▲ 복원(tp-restore-btn)
    · 동별 테이블 "더보기/접기" 토글 (.toggle-arrow) — 기존 rotate(180deg) 애니메이션 그대로 동작

  index_14_3.html → index_14_4.html
  - [폰트] button/input/select/textarea 폼 요소가 body의 font-family를 상속받지 않는 브라우저 기본 동작 수정
    · 원인: PC에서 .filterBtn 등이 user agent stylesheet의 시스템 폰트로 렌더링되어 Pretendard 미적용
    · 해결: `button, input, select, textarea { font-family: inherit; }` 1줄 추가

  index_14_4.html → index_14_5.html
  - [역세권/폴리곤] 역세권 모드 활성화 시, 반경 내 단지 중 polygon.json에 외곽이 정의된 아파트는
    단지 외곽 폴리곤도 함께 지도에 표시 (도로로 분리된 단지는 각 부지를 별개 폴리곤으로 그림)
    · 데이터: ../map/polygon.json (vworld_test.php v5로 추출, [lat,lng] 순서)
    · 매칭 키: normalizeName(aptNm) + sggCd + umdNm
    · 시각: kakao.maps.Polygon — stroke #007bff / fill #007bff / zIndex 50
    · 정리: metroStaticOverlays에 push되어 모드 해제·반경 변경 시 자동 제거
  - [역세권/폴리곤 애니메이션] 표시된 단지 폴리곤은 ripple 사이클(1200ms 주기)과 동기화하여
    맥동(breathing) 애니메이션 적용 — ripple이 터질 때 폴리곤도 진해지고, ripple이 페이드되면 옅어짐
    · fillOpacity: 0.12 ~ 0.30, strokeOpacity: 0.50 ~ 0.90
    · 단일 requestAnimationFrame 루프로 모든 폴리곤 동시 갱신 (성능)
    · clearMetroOverlays() → stopPolygonPulse()로 자동 정리

  index_14_5.html → index_14_6.html
  - [역세권 거리 판정] 정거장-아파트 직선거리(점 기준) → 정거장-단지 폴리곤 외곽선까지 최단거리(선 기준)
    · 단지 폴리곤이 있는 경우: 외곽선 어느 한 점이라도 반경 안에 들어오면 역세권 인정
      - 정거장이 폴리곤 내부에 있으면 거리 0
      - 다중 폴리곤(도로로 분리된 단지)은 모든 ring의 최단거리 중 최솟값 사용
    · 단지 폴리곤이 없는 경우: 기존 대표점 거리(getDistanceMeters)로 자동 fallback
    · 새 함수: pointInPolygon, pointToSegmentDistanceMeters, stationToComplexDistance
    · 알고리즘: ray casting + 평면 근사 t-파라미터 + Haversine 투영점 거리
      (단지 크기 수백 미터에서 평면 근사 오차 ~0.01% 이하)
    · polygonData 로드 위치 이동: nearbyApts 필터 앞으로 (폴리곤 그리기 블록은 캐시 재사용)

  index_14_6.html → index_14_7.html
  - [역세권 ripple] 사이클 종료/재시작 시점에 지도 드래그가 캔슬되던 버그 수정
    · 원인: runOneRippleCycle이 매 사이클마다 Circle 객체를 setMap(null)로 제거하고
      새로 생성 → ripple SVG 위에서 드래그 시작 시, 사이클 끝(900ms) 시점에
      터치 이벤트의 target SVG가 DOM에서 사라져 브라우저가 드래그를 캔슬
    · 해결: Circle 객체를 매 사이클 재사용 (생성/제거 반복 X)
      - 첫 호출 또는 위치 개수 불일치 시에만 생성
      - 사이클 끝: setMap(null) 대신 fillOpacity:0, strokeOpacity:0으로만
      - 다음 사이클: 동일 객체에 setRadius(1)부터 재시작
    · 변경 범위: runOneRippleCycle 함수 내부만 (호출부·다른 함수 영향 없음)

  index_14_7.html → index_14_8a.html  [시안 A — 1안: 애니메이션이 정거장과 함께 이동]
  - [역세권 ripple] 지도 드래그 중 ripple이 드래그 전 위치에 머무는 현상 수정
    · 원인: 카카오맵은 드래그 중 SVG 컨테이너 전체에 CSS transform을 적용해 빠르게 이동.
      그런데 매 프레임 setRadius/setOptions가 호출되는 ripple은 호출 시점마다
      transform 적용 전 원래 좌표로 재렌더링되어 transform 효과가 reset됨 →
      baseCircle은 정거장과 함께 움직이지만 ripple만 이전 위치에 보임
    · 해결: 드래그 중에는 setRadius/setOptions 호출을 일시정지
      - ripple은 마지막 렌더 상태를 유지한 채 SVG transform으로 정거장과 함께 이동
      - pausedDuration으로 멈춘 시간을 보정 → 드래그 종료 후 멈춘 progress부터 자연스럽게 재개
      - 드래그 중에는 새 사이클(setInterval) 시작도 스킵
    · 변경: isMapDragging 플래그 + dragstart/dragend 리스너 1회 등록,
      runOneRippleCycle.step에 일시정지 분기, setInterval 콜백에 스킵 분기

  index_14_8a.html → index_14_9.html
  - [역세권 경고 배너] 우측 상단 X 닫기 버튼 추가 (한 번 닫으면 세션 동안 영구 숨김)
    · 변경: stationDisclaimer 내부에 #stationDisclaimerClose 버튼 추가
    · 본체는 pointer-events:none 유지, 닫기 버튼만 pointer-events:auto
    · disclaimerDismissed 플래그로 한 번 닫으면 역세권 재진입 시에도 표시 안 함
  - [역세권 디폴트] 진입 시 반경 디폴트 500m → 300m
    · metroRadius 초기값 + init() 재설정 + stationDistBtn 셀렉트 디폴트 모두 300m
  - [거래량 패널 레이아웃] '기간 설정'과 '거래 취소' 체크박스를 한 줄로 통합
    · cp-top-row 추가: 좌 — date-display, 우 — cancel-toggle
    · 거래 취소가 단독 줄을 차지하던 구조 제거 → 패널 세로 길이 단축
    · 기존 동작(슬라이더, status-bar, list)은 그대로 유지
  - [브랜드 색상] 브랜드별 고유 색상 적용 (차트 팔레트 9색 + 추가 2색 = 11색)
    · BRAND_COLORS 객체 정의: 래미안=청록, 힐스테이트=피치, 푸르지오=핑크, 자이=라벤더,
      아이파크=페리윙클, 위브=그린, 롯데캐슬=실버, 더샵=레드, e편한세상=탄,
      SKVIEW=오렌지(추가), 그 외=회색(추가)
    · 페이지 로드 시 각 .brandBtn에 인라인 변수 --brand-color 주입
    · .brandBtn.selected의 background를 var(--brand-color)로 변경 (mint 단일색 → 브랜드별)
    · drawMarkers: 브랜드 모드일 때(거래량 모드 X) 라벨 배경을 해당 아파트의 브랜드 색으로
      글씨 색은 휘도(luminance) 기반 자동 판정 (밝은 배경 → 검정, 어두운 배경 → 흰색)
    · 새 헬퍼: getAptBrand(aptNm), getContrastColor(hex)

  index_14_9.html → index_14_10.html
  - [브랜드 색상] '그 외' 색상을 회색에서 흰색으로 (라벨이 무난해짐)
    · BRAND_COLORS에서 "그 외" 키 제거 → drawMarkers의 falsy 분기로 자동 흰색
    · '그 외' brandBtn은 selected 시 디폴트 mint(rgb(0,255,204))로 폴백 — 다른 버튼과 구분 유지
  - [거래량 패널] 디자인 정리
    · status-bar 줄 자체 숨김 (loading-status "완료" 텍스트 미표시)
    · #result-count span을 status-bar에서 cp-top-row 안으로 이동
      → 좌측: date-display + result-count, 우측: cancel-toggle
    · loadingStatus / resultCount JS 갱신 코드는 그대로 유지 (DOM 위치만 변경)
    · 모바일 date-display 글자 크기 0.85em → 1em (아파트 이름 1.05em과 비슷한 크기)
    · result-count 표시 스타일: 작은 회색 텍스트 (· 56건 형태)

  index_14_10.html → index_15.html
  - [거래량 패널] 시안 D '데이터 분석형' 디자인 적용 (panel_concepts.html v1)
    · 패널 상단 3px mint border-top로 액센트
    · 헤더 좌우 분할 (grid 1fr auto):
      좌측: kicker '조회 기간' (10px 대문자 트래킹) + 기간 텍스트 (13px 600)
      우측: 큰 숫자 (26px 800 tabular-nums) + ::after '건' (12px) + label '총 거래'
    · slider-wrap: gray-50 배경 박스로 슬라이더 시각적 그룹화
      얇은 트랙 4px + mint-deep→mint 그라디언트 fill + 16px white thumb (mint-deep border)
    · slider-foot: 좌측 'hint' 텍스트 + 우측 거래 취소 iOS 스타일 토글 스위치
      체크박스는 visually-hidden, .switch pseudo-element로 시각화
      :checked 시 mint-deep 배경으로 전환
  - [거래량 패널 카운트 포맷] resultCount 갱신을 '총 1,266건' → '1,266' (콤마 포함 숫자만)
    · 단위 '건'은 CSS ::after로 표시 (시안 D 의도 — 큰 숫자 강조 + 작은 단위)
    · 이전 갱신 텍스트 한 곳만 수정 (loadCurrentRangeData)
  - [CSS 변수] 시안 D 색상 토큰을 :root에 추가 (--mint-deep, --gray-50/100/200/400/600/700, --ink)
    · 기존 변수(--dong-area-panel-width)와 충돌 없음
    · 컨트롤 패널 영역 한정 사용 (다른 영역 영향 없음)

  index_16_4.html → index_16_5.html
  - [tooltip 차트간 충돌 수정] 한 차트의 tooltip이 떠 있는 상태에서 다른 차트의 점을 탭하면
    새 차트의 tooltip이 떴다가 즉시 사라지던 버그 수정
    · 원인: tooltip element가 전역 단일 인스턴스라 두 차트가 같은 DOM을 공유
      → 차트 A가 켠 직후 차트 B의 "내 hover 풀렸음" 신호가 같은 element의 opacity를 0으로 끔
    · 수정: WeakMap(chart → tooltip element)로 차트마다 전용 element 보유
      각 element는 생성 시점에 자기 차트의 wrap에 한 번 붙고 그 자리에 머무름
      → 차트 간 element 이동 자체가 사라져 transition 보간 부작용도 동시 해소
    · getTooltipEl() 시그니처 변경: 인자 없음 → (chart)
    · externalTooltipHandler에서 부모 이동(parent.appendChild) 로직 제거

  index_16_3.html → index_16_4.html
  - [tooltip 스크롤 어긋남 수정] 차트 위에서 tooltip을 띄운 채로 페이지를 스크롤하면
    tooltip이 차트를 따라가지 않고 화면에 머무르던 버그 수정
    · 원인: external tooltip div를 document.body에 append + 좌표에 pageXOffset/pageYOffset 더함
      → 차트는 스크롤로 움직이는데 tooltip은 페이지 절대좌표라 어긋남
    · 수정: tooltip을 차트 캔버스의 부모(.dap-chart-wrap / .dap-summary-chart-wrap)로 이동
      좌표는 캔버스 offset + Chart.js caret 기준 (부모 내 상대좌표)
    · 두 wrap CSS에 position: relative 추가 (absolute 기준점 명시)
    · 차트 간 hover 이동 시 tooltip div가 자동으로 현재 차트 부모로 옮겨감

  index_16_2.html → index_16_3.html
  - [신규 거래 배지] 시세 추이 카드의 '기간 내 거래 내역' 표에서 거래일 셀 좌측에 NEW 배지 표시
    · 기존 newAptSet(아파트 단위)에 더해 newTxKeySet(거래 단위) 추가
      — 같은 5월에 거래가 여러 건 있을 때 어느 행이 새로 들어온 것인지 식별
    · 키 구성: aptNm+sggCd+umdNm+floor+excluUseAr+dealAmount+dealYear+dealMonth+dealDay
      (loadCurrentRangeData의 makeTxKey와 완전히 동일)
    · summaryNewTxKeySet을 모듈 스코프 변수로 노출, loadCurrentRangeData가 매번 갱신
    · updateSummaryHighlight 행 렌더링에 분기 추가: 해당 거래가 summaryNewTxKeySet에 있으면
      <td> 안 거래일 텍스트 앞에 <span class="dap-tx-new-badge">NEW</span> 삽입
    · .dap-tx-new-badge CSS 추가 (inline-block, 빨강 #ff3b30, newBadgeBlink 깜빡임 재사용)
    · 슬라이더 기간이 신규 거래 발생월을 포함할 때만 배지 노출 (자연스러운 동작)

  index_16_1.html → index_16_2.html
  - [tooltip 디자인] 차트 tooltip을 external HTML 방식으로 전환
    · Chart.js 기본 tooltip은 canvas에 그려져 box-shadow 적용 불가 → external div로 대체
    · 배경 알파 22% (기존 92%) — 뒤 차트가 비치게
    · 1px 경계선 (해당 라인의 양끝색·edge 70% 알파)
    · drop-shadow 0 4px 14px rgba(0,0,0,0.18)
    · 글자색은 흰 배경 위 22% 합성 휘도 기반 자동 (밝으면 검정 / 어두우면 흰색)
    · 기존 callbacks(title/label/filter)는 그대로 사용 — Chart.js가 채워준 tooltip.title/body 활용
    · TOOLTIP_ALPHA 상수 한 곳에서 알파 조정 가능
    · 헬퍼: getDsMidColor (dataset → 본색 hex), externalTooltipHandler
    · 두 차트(동별/종합)가 단일 #x-tooltip div 공유

  index_16.html → index_16_1.html
  - [팔레트 통일] 종합 시세 차트의 페리윙클 #6699FF → #3399FF (동별 차트와 통일)
  - [차트 그라데이션] 동별 차트 / 종합 시세 차트 라인에 옵션 1(착시) 그라데이션 적용
    · 양끝 → 본색 → 양끝 의 좌우 대칭 그라데이션 (Chart.js scriptable borderColor)
    · 색별 양끝 밝기 factor를 PALETTE_FACTOR 객체에 모아 둠 (한 곳에서 조정 가능)
    · 청록·피치 0.93, 나머지 7색 0.97 (값 클수록 양끝과 본색 차이 작아짐)
    · 헬퍼: darkenHex, getPaletteFactor, makeLineGradient
  - [동별 차트 hover] borderColor 직접 할당 → _dimmed 플래그 방식으로 변경
    (그라데이션 borderColor와 hover 흐림 상태가 충돌하지 않도록)
  - [종합 시세 차트] 면적 라인 점선 → 실선 (isDashed 기준 areaIdx >= 1 → idx >= 9, 동별과 통일)
  - [차트 tooltip] 디자인 통일 변경
    · 검은 배경 → 해당 라인 팔레트 색의 반투명 배경 (rgba alpha 0.92)
    · 가격 표시 중복 제거: "70,000만원 (7.0억)" → "7.0억" 한 줄로
    · 종합 차트: 층 정보 추가 표시 ("7.0억 · 12층")
    · 동별 차트: rows에 층 데이터 없음 → 가격만 표시 (그 외 디자인은 동일하게 변경)
  - [범례 색상 일관성] 동별 / 종합 차트 모두 비활성=회색, 활성=팔레트 색상으로 명시
    · fontColor: !isVisible ? '#bbb' : _origColor (undefined 폴백 제거)

  index_15.html → index_16.html
  - [좌측 패널 섹션 구분] 시세 추이 / 동별 가격 비교 두 영역을 시각적으로 분리
    · Sticky 섹션 헤더 도입 — .dap-section-header (시세 추이=민트 / 동별 가격=살구)
    · 헤더 구성: 좌측 4px 컬러 막대 + 24x24 아이콘 + 섹션명
      - 시세 추이 아이콘: 단순 라인 차트 (꺾은선)
      - 동별 가격 아이콘: 높이 다른 빌딩 3개
    · position: sticky로 스크롤 중에도 상단에 현재 섹션 표시
    · 새 함수: insertSummarySectionHeader / insertDongSectionHeader
      — buildSummaryChartCard, renderDongAreaTable 호출 시점에 헤더가 없으면 1회 삽입
  - [색상 팔레트] 시세 추이 / 동별 가격 색상 차별화 (CSS 변수)
    · --c1-mint / --c1-mint-deep / --c1-mint-light (시세 추이, #10b981)
    · --c2-apricot / --c2-apricot-deep / --c2-apricot-light (동별 가격, #fb923c)
  - [면적 배지 색상 분기] .dap-area-badge에 .c1 / .c2 변형 클래스 추가
    · buildSummaryChartCard: badge에 .c1 클래스 부여 (민트 톤)
    · renderDongAreaTable: badge에 .c2 클래스 부여 (살구 톤)
    · 같은 면적(예: 68m²)이라도 어느 섹션 카드인지 색만으로 즉시 식별
  - [면적 표기 통일] 종합 시세 차트의 면적 라벨 반올림 → 버림
    · groupAreasByRounded: Math.round(cluster[0]) → Math.floor(cluster[0])
    · 동별 가격 카드(areaData.area)와 면적 표기 일치 (예: 68.632 → 68)
  - [카드 헤더 중복 제거]
    · .dap-selector { display: none; } — 헤더와 정보 중복 (DOM은 유지, JS 동작 그대로)
    · buildSummaryChartCard: '시세 추이' span 제거 → h2는 면적 배지만 (sticky 헤더에 표시됨)
    · renderDongAreaTable: 카드 h2의 aptNm span 제거 → h2는 면적 배지만 (패널 헤더에 표시됨)
    · renderDongAreaTable: 차트 영역의 별도 h2(아파트명+면적) 블록 전체 제거
  index_17_GPT.html → index_17_GPT_fast.html
  - [초등 성능] 아파트 라벨/학교 라벨은 기존 동작 유지.
  - [초등 성능] 학구도 폴리곤은 현재 지도 화면 + 20% 여유 영역과 겹치는 학구만 setMap(map).
  - [초등 성능] 통학선 SVG path는 현재 지도 화면 + 20% 여유 영역에 걸치는 연결만 생성.
  - [초등 성능] 지도 이동 중 center_changed에서는 통학선 SVG를 비우고, idle 이후 현재 화면 기준으로 재생성.

  index_17_GPT_fast.html → index_18_GPT.html
  - [역세권] 거리 선택에 '전체' 버튼 추가 및 디폴트 선택.
  - [역세권] '전체'는 0m/무제한이 아니라 현재 거리 버튼의 전체 범위(최대 500m)로 처리.
  - [역세권] '전체'에서도 반경 내 아파트 라벨, 단지 외곽 폴리곤, 펄스/맥동 애니메이션이 기존 반경 로직과 동일하게 동작.

  index_18_GPT.html → index_18_GPT_fast.html
  - [역세권 성능] '전체'의 논리 대상은 유지하되 실제 렌더링은 현재 지도 화면 + 20% 여유 영역만 수행.
  - [역세권 성능] 전체 모드: apt_coor.json의 아파트 중 현재 화면 근처 라벨만 표시하고, polygon.json 폴리곤 중 현재 화면과 겹치는 블록만 표시/맥동.
  - [역세권 성능] 100~500m 모드: 기존 거리 판정 후보군은 유지하되, 그중 현재 화면 근처 라벨/폴리곤만 렌더링.
  - [역세권 성능] 지도 이동/줌 이후 idle 시점에 현재 화면 기준으로 역세권 라벨/폴리곤만 재렌더링.

  index_18_GPT_fast.html → index_18_GPT_fast_integrated.html
  - [통합 필터] 브랜드, 역세권, 초등을 독립 모드가 아니라 교집합 조건으로 함께 적용.
  - [통합 필터] 역세권 활성 상태에서 초등/브랜드를 추가해도 역세권 후보·폴리곤·현재 화면 렌더링 성능 로직 유지.
  - [통합 필터] 초등 거리 변경 시 현재 브랜드/역세권 조건과 교집합으로 아파트 라벨·통학선 재계산.
  - [통합 필터 보정] 최종 교집합 아파트가 없는 초등학교/학구도는 학교 라벨·반경 원·학구도 폴리곤을 표시하지 않음.
  - [통합 필터] 대단지/신축/평지는 기존처럼 준비 중 상태 유지.

  index_18_GPT_fast_integrated_3.html → index_18_GPT_fast_integrated_4.html
  - [역세권 레이더] 반경 애니메이션을 물방울 ripple(확산 원) → '모던 브랜드 블루' 레이더 시안으로 교체
    (metro_rader.html v1.0 의 시안2 이식)
    · 구성: 점선 동심원(50% / 75% / 100%) + 십자 크로스(수평·수직) + conic-gradient 회전 스윕 + 스윕 엣지 라인
    · 색상: 역세권 브랜드 파랑 #2f8fff 계열 (스윕 4.2초 1회전, CSS 합성 애니메이션이라 rAF 루프 불필요)
    · 구현: 역 위치마다 kakao CustomOverlay(.metro-radar) 배치 — 반경(m)을 현재 줌의 화면 px로 환산해 지름 지정
      (metroRadiusToPixels: 지도 projection.containerPointFromCoords로 북쪽 offset 픽셀거리 계산)
    · 줌 변경 시 resizeMetroRadars()로 모든 레이더의 크기만 재계산 (zoom_changed 리스너 추가, 다른 요소는 불변)
    · 드래그 시 CustomOverlay가 지도와 함께 자동 이동 → 기존 ripple 드래그 보정 로직(v14_7 / v14_8a)이 불필요해짐
    · 기존 반경 표시 원(baseCircle)·역 마커·역 이름 라벨·거리 판정(Haversine / 폴리곤 최단거리)은 그대로 유지
    · ripple은 호출(runOneRippleCycle / metroRippleTimer setInterval)만 제거, 함수 정의는 보존
    · '전체' 모드는 종전과 동일하게 반경 시각화(레이더) 미표시
    · 단지 폴리곤 맥동(startPolygonPulse, 1200ms)은 ripple과 무관하게 그대로 유지

  index_18_GPT_fast_integrated_4.html → index_18_GPT_fast_integrated_5.html
  - [역세권 레이더 버그수정] 레이더가 역(정거장) 마커와 어긋난 위치를 중심으로 표시되던 문제 수정
    · 원인: .metro-radar 요소 자체에 지름 px를 주고 CustomOverlay xAnchor/yAnchor:0.5로 중앙정렬을
      맡겼는데, 카카오가 콘텐츠를 DOM에 붙이는 시점의 offsetWidth/Height로 앵커 오프셋을 계산 →
      큰 요소의 측정 타이밍에 따라 중앙(-50%) 보정이 어긋나 중심이 역에서 반경만큼 밀려 보임
    · 해결: 0×0 래퍼(.metro-radar-wrap) + 앵커(0,0) 패턴으로 변경
      - 래퍼 원점(0,0)이 곧 역 좌표가 되고, 내부 .metro-radar는 position:absolute + left/top:0 +
        transform: translate(-50%,-50%)로 자체 크기 기준 중앙정렬 → 카카오의 크기 측정에 의존하지 않음
      - resizeMetroRadars는 내부 .metro-radar 요소(item.content)의 width/height만 갱신 (중앙정렬 유지)
    · 변경 범위: v4에서 추가한 레이더 관련 CSS/JS만 수정 (다른 기능·역 마커·반경 원·거리 판정 불변)

  index_18_GPT_fast_integrated_5.html → index_18_GPT_fast_integrated_6.html
  - [역세권 단지 점멸] 단지 폴리곤 점멸을 '일괄 1200ms 주기' → '레이더 스윕이 단지를 훑는 순간 점등' 방식으로 변경
    (metro_rader.html 시안4 '데이터 레이더' blip 동작을 실제 지도에 적용)
    · 동작: 화면에 보이는 각 정거장 레이더의 스윕 빛(.mr-sweep-line, 4.2초 1회전, 12시=북=0°, 시계방향)이
      단지 중심 방위를 지나는 순간 해당 폴리곤을 밝게 켰다가(level=1) 매 프레임 감쇠(×0.94)로 서서히 흐려지게 함
    · 겹침 처리: 한 단지가 여러 정거장 반경에 겹치면 각 역의 빛이 닿을 때마다 각각 점멸 (역별 방위 목록 보유)
    · 밝기: 채움 0.12→0.42, 외곽선 0.50→1.0 사이를 점멸 레벨에 비례해 보간
    · 구현
      - renderMetroPolygonEntry: 각 ring의 중심좌표(_centroid, 좌표 단순평균)를 폴리곤에 저장
      - 새 헬퍼 metroBearingDeg(정거장→단지 방위, 북0°·시계방향), 상수 METRO_SWEEP_PERIOD_MS=4200(CSS와 동기)
      - startPolygonPulse 재작성: 시작 시 폴리곤별로 반경 내(거리 ≤ radius×1.25) 정거장들의 방위를 미리 계산,
        rAF 루프에서 prevAngle~curAngle 구간을 스윕이 지났는지 판정(360→0 경계 처리)해 점등
      - showMetroStations: 레이더 오버레이 생성을 refreshMetroViewportRendering()보다 앞으로 이동
        (첫 렌더 시점에 metroRadarOverlays(역 좌표)가 있어야 blip 방위 계산 가능)
    · '전체' 모드는 레이더가 없어 점멸도 동작하지 않음(폴리곤은 정적 표시) — 기존과 동일
    · 역 마커·반경 원(baseCircle)·거리 판정·레이더 스윕 자체는 불변

  index_18_GPT_fast_integrated_6.html → index_18_GPT_fast_integrated_7.html
  - [역세권 단지 점멸 버그수정] 드래그 이동 후 레이더 빛과 단지 점멸 시점이 어긋나던(점멸이 밀리던) 문제 수정
    · 원인1(주범): v6은 JS 자체 시계(startTime=performance.now())로 스윕 각도를 계산했는데,
      드래그 시 renderStationEffectsForCombined → clearMetroPolygons(stopPolygonPulse) → startPolygonPulse
      재시작으로 startTime이 매번 리셋됨. 반면 화면의 CSS 빛(.mr-sweep-line, animation)은 페이지 로드
      기준으로 계속 도는 독립 시계라 리셋되지 않음 → 두 위상이 임의 양만큼 어긋나 점멸이 밀려 보였음.
    · 원인2(부차): metroBearingDeg가 위도 보정 없이 구면 공식을 써서 동서 성분이 과대평가 → 방위 수 도 오차.
    · 해결1: metroReadSweepAngle() 추가 — 실제 .mr-sweep-line의 getComputedStyle transform 행렬에서
      회전각(atan2(b,a))을 직접 읽어 사용. JS 시계 대신 화면 빛 위상을 그대로 따라가므로 드래그/줌/탭
      복귀에도 절대 어긋나지 않음. (읽기 실패 시에만 기존 JS 시계로 폴백)
      - 모든 레이더는 동일 CSS 애니메이션이라 metroRadarOverlays[0] 하나만 읽으면 전체에 적용됨
      - 루프 첫 프레임은 prevAngle이 없어 점등 판정 스킵(다음 프레임부터 정상 동작)
    · 해결2: metroBearingDeg를 화면(메르카토르) 시각각도 기준으로 변경 — 경도차에 cos(평균위도) 보정 적용
      (east = dLng·cos(lat), north = dLat, bearing = atan2(east, north))
    · 변경 범위: v6의 점멸 관련 함수만 수정 (레이더 스윕 CSS·역 마커·반경 원·거리 판정 불변)

  index_18_GPT_fast_integrated_7.html → index_18_GPT_fast_integrated_8.html
  - [역세권 단지 점멸 버그수정] v7 적용 후 점멸이 하나도 안 뜨던 문제 수정
    · 원인: v7의 metroReadSweepAngle()은 getComputedStyle(.mr-sweep-line).transform 행렬에서 각도를
      추출했는데, .mr-sweep-line이 box-shadow/opacity로 GPU 합성 레이어에 올라가면 메인스레드의
      getComputedStyle이 애니메이션 진행값을 못 읽고 정적값(transform:none→0)을 반환 → curAngle이
      매 프레임 0으로 고정 → prevAngle(0)~curAngle(0) 구간에 걸리는 방위가 없어 점등 판정이 영영 false.
      (추가로 transform-origin:bottom center라 matrix 파싱도 부정확했음)
    · 해결: Web Animations API로 전환 — line.getAnimations()에서 mr-spin 애니메이션의 currentTime(ms)을
      직접 읽어 (currentTime % 4200)/4200*360 으로 각도 환산. 합성 레이어 여부와 무관하게 정확하고,
      화면 빛과 동일 애니메이션이라 위상이 100% 일치. (읽기 실패 시에만 기존 JS 시계로 폴백)
    · 변경 범위: metroReadSweepAngle() 함수 본문만 교체 (점멸 루프·방위 계산·CSS·다른 기능 불변)

  index_18_GPT_fast_integrated_8.html → index_18_GPT_fast_integrated_9.html
  - [역세권 단지 점멸 버그수정] 드래그로 화면 밖 정거장을 다시 화면에 들이면 레이더가 12시로 초기화되며
    점멸 위상이 어긋나던 문제 수정 (재현: 정거장을 화면 안/밖으로 반복 이동 시 매번 12시 리셋 확인)
    · 원인: 카카오 CustomOverlay는 화면 밖으로 나가면 콘텐츠를 DOM에서 분리하고 다시 들어오면 재부착하는데,
      CSS 애니메이션(animation: mr-spin)은 DOM 재부착 시 0도(12시)부터 다시 시작된다. v8까지는 JS가
      화면 빛의 각도를 '읽어서' 점멸을 맞췄으므로, 막 재부착돼 12시로 초기화된 빛과 (리셋 안 된) 점멸
      위상이 어긋났다. 또 정거장마다 부착/분리 타이밍이 달라 레이더 간 위상도 제각각이 될 수 있었다.
    · 해결: 빛 회전과 점멸을 모두 '리셋되지 않는 단일 전역 시계(metroSweepEpoch, 최초 1회 고정)'로 구동.
      - CSS의 mr-spin animation을 .mr-sweep / .mr-sweep-line에서 제거(재부착 초기화 원인 제거)
      - metroSweepAngleNow(now): (now-epoch)%4200 → 0~360° 전역 각도
      - metroDriveRadarSweep(angle): 매 프레임 화면 안 레이더의 .mr-sweep/.mr-sweep-line transform을
        같은 각도로 직접 회전 → 모든 레이더가 항상 동일 위상, 재부착돼도 즉시 올바른 각도로 그려짐
      - 점멸 판정도 같은 curAngle 사용 → 빛과 점멸이 구조적으로 100% 일치 (요소 읽기 metroReadSweepAngle 폐기)
      - 펄스 루프 가드를 metroPolygons.length>0 → isStationMode로 완화(폴리곤 0개여도 빛은 계속 회전해야 함),
        renderStationEffectsForCombined의 호출 조건도 !metroCurrentIsAll로 변경('전체' 모드 제외)
    · @keyframes mr-spin은 사용처가 없어졌지만 무해하여 제거하지 않음(불필요한 diff 최소화)
    · 변경 범위: 레이더 회전/점멸 구동부와 관련 CSS animation 라인만 수정 (역 마커·반경 원·거리 판정 불변)

  index_18_GPT_fast_integrated_9.html → index_18_GPT_fast_integrated_10.html
  - [역세권 단지 점멸 버그수정] 폴리곤은 그려졌는데 레이더가 훑어도 점멸하지 않던 단지 문제 수정
    (재현: 108정거장 200m 반경 안에 외곽선이 걸쳐 폴리곤이 그려진 '문수로IPARK1'이 점멸 안 함)
    · 원인: '폴리곤 표시 판정'과 '점멸 거리 판정'의 기준이 달랐음.
      - 폴리곤 표시: stationToComplexDistance(외곽선 최단거리) ≤ 반경  (큰 단지의 가까운 모서리 기준)
      - 점멸 판정(v6~v9): getDistanceMeters(단지 중심거리) > 반경×1.25 이면 제외  (중심 기준)
      → 단지가 크면 외곽선은 반경 안이라 폴리곤은 그려지지만, 중심은 반경×1.25보다 멀어
        점멸 후보(bearings)에서 빠져 레이더가 지나도 점멸하지 않았다.
    · 해결: 점멸 거리 판정을 폴리곤 표시와 동일한 '외곽선 최단거리 ≤ 반경' 기준으로 통일.
      - renderMetroPolygonEntry: 각 폴리곤에 ring 좌표(_ring) 저장
      - startPolygonPulse: stationToComplexDistance(s, [poly._ring]) ≤ radius 인 역만 방위 목록에 포함
        → '이 단지를 화면에 띄운 바로 그 역들'과 정확히 일치(무관한 먼 역에는 반응하지 않음 = 부작용 없음)
      - 방위(어느 방향을 비추는지)는 시각적으로 자연스러운 단지 중심(centroid) 기준 그대로 유지
      - _ring이 없는 예외 상황에서만 기존 중심거리×1.25 폴백
    · 변경 범위: 폴리곤 ring 저장 + 점멸 거리 필터만 수정 (회전 구동·방위 계산·CSS·다른 기능 불변)

  index_18_GPT_fast_integrated_10.html → index_18_GPT_fast_integrated_11.html
  - [역세권 라벨 점멸] 아파트 이름창(.aptLabel.station-nearby) 테두리 점멸을 '1.2초 일괄' →
    '레이더 스윕이 단지를 훑을 때 점등'으로 변경 (폴리곤 부지 점멸과 완전히 동기)
    · 기존: hasPolygon이면 .station-nearby 클래스 부여 → CSS animation stationNearbyPulse 1.2s로 일괄 점멸
      (폴리곤 부지 점멸은 레이더 동기인데 이름창만 따로 1.2초로 돌아 리듬이 어긋났음)
    · 변경
      - CSS: .station-nearby의 animation 제거(테두리는 '폴리곤 보유' 표식으로 유지, @keyframes는 미사용·보존)
      - renderMetroPolygonEntry: 폴리곤에 소속 단지 데이터(_found) 저장
      - startPolygonPulse: 각 폴리곤 엔트리에 대응 라벨 DOM(drawn에서 findPolygonForApt로 매칭)을 연결,
        step 루프에서 폴리곤 점등 레벨(level 0~1)을 같은 프레임에 라벨 box-shadow에도 보간 적용
        (한 단지가 여러 ring이면 라벨은 하나이므로 라벨별 max 레벨로 합쳐 1회만 적용)
      - 잔여 글로우 정리: 폴리곤 비보유로 바뀐 라벨/모드 종료 시 inline boxShadow 제거
        (renderStationEffectsForCombined의 else 분기, clearMetroOverlays)
    · 부지(폴리곤)와 이름창이 이제 동일한 레이더 리듬으로 함께 점멸
    · 변경 범위: 라벨 점멸 연동부와 .station-nearby CSS animation 라인만 수정 (역 마커·반경 원·거리 판정 불변)

  index_18_GPT_fast_integrated_11.html → index_18_GPT_fast_integrated_12.html
  - [역세권 라벨 점멸 버그수정] v11에서 라벨(이름창) 테두리 점멸이 전혀 안 뜨던 문제 수정
    (부지 폴리곤 점멸은 정상, 라벨만 미동작)
    · 원인: v11은 펄스에서 라벨을 drawn.find(d => findPolygonForApt([poly._found], d.apt))로 우회 매칭했는데
      이 매칭이 안정적으로 성사되지 못해 labelEl이 null → 라벨에 글로우가 적용되지 않았다.
    · 해결: 매칭을 '폴리곤 키(metroPolygonKey)' 기준으로 통일.
      - renderStationEffectsForCombined: .station-nearby 부여 시 라벨 el에 dataset.metroKey = metroPolygonKey(found) 새김
        (비보유로 바뀌면 dataset.metroKey 및 inline 글로우 제거)
      - startPolygonPulse: drawn을 훑어 key→labelEl 맵(labelByKey)을 만들고, 각 폴리곤은 metroPolygonKey(poly._found)로
        라벨을 O(1) 매칭 → 확실히 연결
    · 부가: 라벨 점등 글로우를 기존 1.2초 점멸 피크 수준(0 0 0 5px rgba(0,123,255,0.45))으로 강화해 가시성 확보
    · 변경 범위: 라벨 매칭/글로우 강도만 수정 (점멸 판정·회전 구동·폴리곤 점멸·거리 판정 불변)

  index_18_GPT_fast_integrated_12.html → index_18_GPT_fast_integrated_13.html
  - [역세권 라벨 점멸 버그수정] v12에서도 라벨 점멸이 화면에 안 보이던 문제 수정
    (진단으로 매칭은 성공 확인 — 라벨에 빨강 outline 강제 시 정상 표시됨 → 원인은 글로우 표현 방식)
    · 원인: 라벨 점멸을 box-shadow로 구현했는데, .aptLabel에 transition: box-shadow 0.2s ease 가 걸려 있어
      매 프레임(~16ms) box-shadow를 바꿔도 transition이 200ms에 걸쳐 따라가다 매번 리셋 → 변화가 묻혀
      거의 기본값에 머무름. (transition 대상이 아닌 빨강 outline은 즉시 적용돼 잘 보였음)
    · 해결: 라벨 점멸을 outline 기반으로 변경(transition 비대상이라 즉시 반영, 진단에서 가시성 검증됨).
      - metroLabelShadow → metroLabelStyle(lv): { outline(파란 링 0→4px, 알파 0→0.85), shadow } 반환
      - step: 라벨에 outline/outlineOffset/boxShadow 적용
      - 정리(else 분기, clearMetroOverlays)에 outline 제거 추가
    · 변경 범위: 라벨 점멸 표현(box-shadow→outline)만 수정 (매칭·점멸 판정·회전·폴리곤 점멸·거리 판정 불변)

  index_18_GPT_fast_integrated_13.html → index_18_GPT_fast_integrated_14.html
  - [역세권 라벨 점멸 비주얼 복원] 점멸 모양을 v13의 outline 링 → '원래 1.2초 stationNearbyPulse 파란 글로우'로
    복원하되 타이밍은 레이더 동기 유지(사용자 요청).
    · 원래 글로우: 레벨0 box-shadow:0 4px 12px rgba(0,0,0,0.15) → 레벨1 rgba(0,123,255,0.45)+0 0 0 5px rgba(0,123,255,0.15)
      두 상태를 점등 레벨로 보간(metroLabelShadow)해 매 프레임 적용.
    · v12에서 box-shadow가 안 보이던 근본 원인(.aptLabel의 transition: box-shadow 0.2s가 매 프레임 갱신을 묻음)은
      점멸 중 해당 라벨의 transition에서 box-shadow만 제외(background/transform transition은 유지)하여 해결.
    · 정리(else 분기, clearMetroOverlays): outline/boxShadow 제거에 더해 inline transition 복원 추가.
    · 변경 범위: 라벨 점멸 비주얼/그 적용부만 수정 (매칭·점멸 판정·회전·폴리곤 점멸·거리 판정 불변)

  index_18_15.html → index_20.html
  - [필터 UX] 메인 버튼(브/역/대/신/평/초)과 상세 패널 버튼의 선택/적용 규칙 정비.
    · [디폴트 제거] 상세 패널의 '전체' 기본 선택 제거 — 메인 버튼을 처음 누르면 불만 켜지고
      패널은 '아무것도 선택되지 않은' 상태로 열린다. (HTML의 stationDistBtn/schoolDistBtn 'selected' 제거,
      metroRadius/schoolDist 초기값을 'all'/0 → null(미선택)로 변경)
    · [미선택=표시 없음] 미선택 상태에서는 지도에 아파트를 표시하지 않는다. '전체' 또는 거리를 직접
      눌러야 표시. (passStationFilter/passSchoolFilter에 'null이면 false' 분기 추가,
      renderStationEffectsForCombined에 미선택 가드 추가 → 역 마커/레이더/폴리곤도 미표시)
    · ['전체'도 적용으로 인정] isStationFilterApplied / isSchoolFilterApplied 기준을 'all/0 제외'에서
      'null만 미적용'으로 변경. → 전체/거리가 선택되어 있으면 패널을 닫거나 다른 메인 버튼을 눌러도
      해당 기능의 불과 효과가 유지된다. (이전엔 '전체'에서 같은 버튼 재클릭/다른 버튼 클릭 시 꺼지던 문제 해결)
    · [상세 버튼 토글] 상세 패널 버튼은 한 번 누르면 적용, 같은 버튼을 한 번 더 누르면 해제(미선택)되도록
      stationDistBtn/schoolDistBtn 클릭 핸들러에 재클릭 해제 분기 추가.
    · [메인 버튼 불 유지] 상세 버튼이 하나라도 선택되어 있으면 메인 버튼 불 유지, 미선택이면
      같은 메인 버튼 재클릭 시 기능 완전 해제(OFF). (closePreviewPanelWithoutAppliedFilter는 새 판정
      기준에 따라 미선택 기능만 정리, 적용된 기능은 유지)
    · 브랜드는 기존 다중 토글(선택 시 적용/재선택 시 해제, 선택 1개 이상이면 불 유지) 구조가 이미
      동일 규칙이라 로직 변경 없음. 대단지/신축/평지는 기존처럼 준비 중 유지.
    · 변경 범위: 위 필터 선택/적용/토글 로직과 관련 주석만 수정 (지도 렌더링·역세권 레이더/점멸·
      초등 학구도·거리 판정·차트 등 그 외 기존 동작 불변)

  index_20.html → index_20_1.html
  - [베이스 전체 표시] 필터·기능이 하나도 없는 상태에서 지도를 비우지 않고 APTS 전체를
    현재 화면(+20% 여유) 기준으로 항상 표시한다.
    · 초기 로딩 시 빈 화면 → 전체 아파트 표시 (renderCombinedAptMarkersAndEffects 무필터 분기,
      신규 drawBaseViewportApts, init, 거래량 모드 종료 시 복귀).
    · 무필터 상태에서 지도 이동/줌 시 idle 시점에 현재 화면 기준 재표시.
  - [미선택=전체 취급] 역세권/초등의 '미선택(null)' 의미를 '표시 없음'에서 '전체(제약 없음, 통과)'로
    변경. → 기능을 켜면 상세 버튼이 아무것도 선택 안 돼 있어도 전체 아파트 + 해당 오버레이가 표시된다.
    · passStationFilter/passSchoolFilter: null → true(통과).
    · renderStationEffectsForCombined: null을 '전체'와 동일 취급(treatAsAll) — 폴리곤 표시, 레이더 없음.
    · showMetroStations: 미선택(null)을 '전체'로 렌더링하되 상태값 null은 유지(사이클 구분용).
    · 상세 버튼 재클릭 해제 시에도 빈 화면이 아니라 '전체'로 복귀.
  - [메인 버튼 3단계 사이클] (역세권·초등 동일)
    · 1번: 기능 ON + 패널 열림 + 전체 아파트/오버레이 표시 (상세는 미선택).
    · 2번: 패널만 닫음 (불·기능·효과 유지).
    · 3번: 상세 미선택이면 기능 완전 해제(불 끄고 오버레이 제거),
           상세가 선택돼 있으면 기능 유지한 채 패널을 다시 열어줌(이전 버전의 '꺼짐' 버그 해결).
  - [불 유지 기준 변경] 메인 버튼 active = '기능 ON(isStationMode/isSchoolMode) 또는 패널 열림'.
    isStationFilterApplied/isSchoolFilterApplied는 'ON이면 적용'으로 단순화 → 다른 메인 버튼으로
    전환해도 켜진 기능은 유지(교집합 누적).
  - 브랜드(다중 토글)는 이미 '미선택=전체 통과' 구조라 변경 없음. 대단지/신축/평지는 준비 중 유지.
  - 변경 범위: 위 필터 상태/표시/사이클 로직과 관련 주석만 수정 (역세권 레이더/점멸·초등 학구도·
    거리 판정·폴리곤·차트 등 그 외 기존 동작 불변)

  index_20_1.html → index_20_2.html
  - [이름창 배경 시세 추이] 첫 접속(필터 없는 흰색 라벨) 상태의 아파트 이름창 배경에
    '시세 추이' 미니 스파크라인을 깐다. 이름 가독성 유지를 위해 흐릿한 민트 라인 + 옅은 면적 음영만 사용.
    · 데이터(A안): 최근 12개월 매매(data_*) + 분양권(silv_*) 거래 파일을 init에서 1회 로드.
      기존 fileCache 공유 → 패널 열 때(fetchAllTradesForApt)와 중복 fetch 없음.
    · 84타입 정의: 전용면적 80㎡ 초과 ~ 90㎡ 미만. (코드에 기존 '타입 범위' 정의가 전혀 없어 신규 도입)
    · 단지별 월평균(매매+분양권 합산, isNormalDeal 통과분)을 aptTrendMap에 미리 집계 →
      drawMarkers에서 '흰색 라벨'일 때만 background-image(data URI SVG)로 표시.
    · 거래량/브랜드 등 색이 칠해지는 라벨에는 추세선을 넣지 않음(라벨 색의 의미 보존).
    · 최근 12개월 84타입 거래가 2개월(2점) 미만인 단지는 배경 없이 기존 흰색 라벨 그대로.
  - 신규 식별자: TREND_MONTHS / TREND_AREA_MIN / TREND_AREA_MAX, aptTrendMap / aptTrendLoaded,
    loadAptTrendData(), buildTrendSparklineDataUri(), CSS .aptLabel.has-trend (모두 충돌 0건 확인).
  - 변경 범위: 위 신규 상수/변수/함수/CSS와, drawMarkers의 흰색 라벨 분기·init의 trend 로드 호출만 추가.
    (지도 렌더링·역세권·초등·차트·필터 등 그 외 기존 동작 불변)

  index_20_2.html → index_20_3.html
  - [이름창 배경 시세 추이] 민트 단색 → 추세 '방향 색'으로 변경 (흰 라벨 위 가독성 개선).
    · 방향 판정: 창 안 첫 달 평균 vs 마지막 달 평균 → 상승=빨강(#e5484d) / 하락=파랑(#2563eb) /
      동일=회색(#9ca3af). 하락 파랑은 역세권 파랑(#007bff)과 구분되는 톤 사용.
    · 라인 강화: stroke-opacity 0.55→0.9, stroke-width 1.6→2, 면적 음영 0.10→0.15
      (멀리서도 빨강/파랑으로 상승·하락이 한눈에, 글씨는 여전히 흰 바탕이라 안 가림).
  - 변경 범위: buildTrendSparklineDataUri의 색/선 굵기·불투명도만 수정. 데이터 로직(84타입·12개월·
    월평균 집계·표시 조건)과 그 외 기존 동작은 전부 불변.

  index_20_3.html → index_20_4.html
  - [기간 확대] 이름창 배경 시세 추이를 최근 12개월 → 24개월로 확대 (TREND_MONTHS 12→24).
    · 받는 파일 24개월×2종=48개로 증가(기존 fileCache 공유, 중복 fetch 없음).
  - [곡선 보간 통일] 미니 트렌드를 직선 polyline → 상세 패널 차트와 동일한 단조(monotone) 3차
    곡선으로 변경. (Chart.js cubicInterpolationMode:'monotone'과 같은 방식 — 오버슈트/수직 낙하선 없음)
    · 신규 buildMonotonePath(): 점들의 접선을 구해 3차 베지어 제어점으로 변환(Fritsch–Carlson 단조성 보정).
    · buildTrendSparklineDataUri: polygon/polyline → path(area)+path(line)로 교체, 안 쓰는 linePts/areaPts 제거.
  - 참고: 미니 트렌드는 '84타입(전용 80~90)'만, 상세 차트는 면적 전체/면적별이라 같은 단지라도
    두 곡선이 완전히 일치하진 않음(데이터 범위 차이 — 보간 방식은 이제 동일).
  - 변경 범위: TREND_MONTHS 값, buildMonotonePath 신규, buildTrendSparklineDataUri의 선/면적 렌더링만 수정.
    (데이터 집계·표시 조건·방향 색 판정·그 외 기존 동작 불변)

  index_20_4.html → index_20_5.html
  - [표시 조건 변경] 이름창 배경 미니 트렌드를 '필터 미적용 상태에서만' 자동 표시하도록 변경
    (브랜드/역세권 등과 색이 섞여 어지럽던 문제 해소). 기존 '흰색 라벨이면 항상' → miniTrendOn 토글 기준.
  - [좌측 하단 토글 추가] #miniTrendToggle ('미니 차트 보기'=ON / '미니 차트 끄기'=OFF, 좌측 하단 고정).
    · 필터 ON↔OFF '경계'를 넘을 때만 자동 전환: 필터 없음→자동 보기(ON), 필터 걸림→자동 끄기(OFF).
    · 경계 안에서는 사용자 수동 선택 유지 → 필터가 걸려 있어도 수동으로 '보기'로 켜면 라벨 배경에 표시.
    · '필터 걸림' = 메인 버튼(브/역/대/신/평/초) 또는 거래량 모드 중 하나라도 활성(isMiniTrendFilterActive).
  - [반영 방식] 토글 클릭 시 재fetch 없이 drawn 배열을 직접 순회해 배경만 즉시 갱신(applyMiniTrendToDrawn).
    필터 변경 시에는 renderCombinedAptMarkersAndEffects/toggleTransactionMode 시작부에서 자동 동기화.
  - 신규: miniTrendOn/miniTrendPrevFiltered, applyTrendBgToLabel(), applyMiniTrendToDrawn(),
    isMiniTrendFilterActive(), syncMiniTrendWithFilter(), updateMiniTrendToggleUI(), bindMiniTrendToggle(),
    #miniTrendToggle DOM/CSS (모두 충돌 0건 확인).
  - 변경 범위: 위 신규 토글 로직/DOM/CSS와, drawMarkers의 트렌드 적용 한 줄을 헬퍼 호출로 교체,
    두 렌더 진입점에 동기화 호출 1줄씩 추가. (데이터 집계·곡선·방향 색·그 외 기존 동작 불변)

  index_20_5.html → index_20_6.html
  - [토글 UI] '미니 차트 보기/끄기' 텍스트 전환 → '미니 차트' 텍스트 고정 + 슬라이딩 토글 스위치로 변경.
    · 마크업: .mt-label(텍스트 전환) → .mt-text('미니 차트' 고정) + .mt-switch/.mt-knob(스위치).
    · CSS: 상태 점(::before) 제거 → 켜짐(민트)/꺼짐(회색) 트랙 + 노브 이동 스위치.
    · updateMiniTrendToggleUI: 텍스트 갱신 제거, 'on' 클래스만 토글(스위치 시각 상태). 동작 로직 동일.
  - [미니 트렌드 스타일 미세조정] fill-opacity 0.15→0.08, stroke-opacity 0.9→0.8, stroke-width 2→0.8
    (더 얇고 옅은 선 — 사용자 지정값 반영).
  - 변경 범위: #miniTrendToggle 마크업/CSS, updateMiniTrendToggleUI 본문, buildTrendSparklineDataUri의
    SVG 선/면적 표현 값만 수정. (토글 상태머신·데이터·곡선·그 외 기존 동작 불변)

-->

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>브역대신평초</title>

  <!-- Pretendard 웹폰트 (PC/모바일/OS 무관하게 동일한 한글 렌더링) -->
  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
  <link rel="stylesheet" as="style" crossorigin
        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />

  <style>
    /* ===== [공통 레이아웃] ===== */
    :root {
      --dong-area-panel-width: 420px;
      /* [v15] 거래량 패널 시안 D 색상 토큰 */
      --mint-deep: rgb(0, 200, 160);
      --ink: #0f1419;
      --gray-50: #f7f8fa;
      --gray-100: #eef0f3;
      --gray-200: #e2e6eb;
      --gray-400: #9aa3ad;
      --gray-600: #4b5563;
      --gray-700: #2a3440;
    }
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic', sans-serif; }
    /* button/input/select/textarea는 body의 font-family를 자동 상속하지 않음 → 명시적으로 상속 */
    button, input, select, textarea { font-family: inherit; }
    body.resizing-dong-panel { cursor: ew-resize; user-select: none; }
    #map { width: 100%; height: 100%; }

    /* ===== [좌측 필터 버튼 스택] ===== */
    #sideFilters {
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
      transition: left 0.3s ease;
    }

    /* ===== [우측 거래량 버튼] ===== */
    #rightFilters {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 2000;
      transition: right 0.3s ease;
      /* [27_1] 대장 버튼이 거래량 아래로 쌓이도록 — 자식이 하나일 때의 렌더 결과는 기존과 동일 */
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
    }

    .filterBtn {
      width: 90px;
      height: 34px;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,0.15);
      background: #fff;
      color: #111;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px 0 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.10);
      cursor: pointer;
      outline: none;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .filterBtn:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.18);
      transform: translateY(-1px);
    }

    .filterBtn .arrow {
      font-size: 12px;
      opacity: 0.85;
      margin-left: 8px;
    }

    .filterBtn.active {
      background: rgb(0,255,204);
      border-color: rgba(0,0,0,0.08);
      color: #000;
    }

    /* ===== [브랜드 목록 버튼] ===== */
    #brandList, #stationList {
      position: absolute;
      left: 110px;
      top: 10px;
      z-index: 2000;
      display: none;
      flex-direction: column;
      gap: 8px;
      user-select: none;
      transition: left 0.3s ease;
    }

    #stationList {
      top: 52px;
    }

    .brandBtn, .stationDistBtn {
      width: 90px;
      height: 34px;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,0.15);
      background: #fff;
      color: #111;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.10);
      cursor: pointer;
      outline: none;
      white-space: nowrap;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .brandBtn:hover, .stationDistBtn:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.18);
      transform: translateY(-1px);
    }

    .brandBtn.selected, .stationDistBtn.selected {
      background: rgb(0,255,204);
      border-color: rgba(0,0,0,0.08);
      color: #000;
    }

    /* [v14_9] 브랜드 버튼은 각자 고유 색상을 변수로 받아서 selected 시 적용 */
    .brandBtn.selected {
      background: var(--brand-color, rgb(0,255,204));
      color: var(--brand-text-color, #000);
    }

    /* ===== [우측 슬라이드 패널 (Desktop Default)] ===== */
    .transactionPanel {
      position: absolute;
      top: 0;
      right: -420px;
      width: 400px;
      height: 100%;
      background: #f5f5f5;
      box-shadow: -4px 0 20px rgba(0,0,0,0.14);
      z-index: 1500;
      transition: right 0.3s ease, bottom 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .transactionPanel.open {
      right: 0;
    }

    .tp-header {
        background: white;
        padding: 15px;
        text-align: center;
        border-bottom: 1px solid #eee;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .tp-header h2 { margin: 0; color: #333; font-size: 1.1em; }

    .control-panel {
        /* [v15] 시안 D '데이터 분석형' 적용: white bg + mint top accent */
        background: white;
        padding: 16px 16px 14px;
        border-radius: 12px;
        margin: 10px;
        text-align: left;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        border-top: 3px solid rgb(0, 255, 204);
    }

    /* [v15] 좌우 분할 헤더 */
    .cp-head {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: center;
        margin-bottom: 12px;
    }
    .cp-left {
        border-right: 1px solid var(--gray-100);
        padding-right: 14px;
    }
    .cp-kicker {
        font-size: 10px;
        font-weight: 700;
        color: var(--gray-400);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        margin-bottom: 6px;
    }
    /* [v15] date-display는 시안 D의 .period 역할로 재정의 */
    .date-display {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.01em;
        background: none;
        padding: 0;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
    /* JS에서 'YYYY.MM ~ YYYY.MM' 형식으로 textContent를 통째로 갱신하므로
       구분자 색상 분리는 적용 안 함 (텍스트 안에 ~ 그대로 표시) */
    .cp-right {
        text-align: right;
        padding-right: 4px;
    }
    .cp-num {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 1;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }
    .cp-num::after {
        content: '건';
        font-size: 12px;
        font-weight: 500;
        color: var(--gray-400);
        margin-left: 3px;
    }
    .cp-num:empty::after {
        content: '';
    }
    .cp-num-label {
        font-size: 10px;
        color: var(--gray-400);
        letter-spacing: 0.15em;
        margin-top: 3px;
        font-weight: 600;
        text-transform: uppercase;
    }

    /* [v15] 슬라이더 박스 */
    .cp-slider-wrap {
        background: var(--gray-50);
        border-radius: 8px;
        padding: 10px 12px;
        margin-top: 8px;
    }
    .slider-container {
        position: relative;
        width: 100%;
        height: 16px;
        margin: 0;
        touch-action: none;
    }
    .slider-track {
        position: absolute;
        top: 50%; left: 0; right: 0; height: 4px;
        background: var(--gray-200); border-radius: 2px;
        transform: translateY(-50%);
    }
    .slider-fill {
        position: absolute;
        top: 50%; height: 4px;
        background: linear-gradient(90deg, var(--mint-deep), rgb(0, 255, 204));
        border-radius: 2px;
        transform: translateY(-50%);
    }
    .slider-handle {
        position: absolute;
        top: 50%; width: 16px; height: 16px;
        background: #fff; border: 2px solid var(--mint-deep); border-radius: 50%;
        transform: translate(-50%, -50%);
        cursor: grab; z-index: 10;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
        transition: box-shadow 0.2s ease, transform 0.15s ease;
    }
    .slider-handle:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.22); }
    .slider-handle:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 4px 14px rgba(0,0,0,0.28); }

    .cp-slider-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
    }
    .cp-hint {
        font-size: 10px;
        color: var(--gray-400);
        letter-spacing: 0.05em;
    }

    .helper-text {
        margin-top: 10px;
        font-size: 0.8em;
        color: #999;
    }

    /* [v15] iOS 스타일 토글 스위치 (체크박스는 hidden) */
    .cancel-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        color: var(--gray-600);
        cursor: pointer;
        user-select: none;
        font-weight: 500;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        transition: none;
        flex-shrink: 0;
    }
    .cancel-toggle:hover { background: none; }
    .cancel-toggle input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }
    .cp-toggle-switch {
        width: 24px; height: 14px;
        background: var(--gray-200);
        border-radius: 999px;
        position: relative;
        transition: background-color 0.2s ease;
        flex-shrink: 0;
    }
    .cp-toggle-switch::after {
        content: '';
        position: absolute;
        width: 10px; height: 10px;
        border-radius: 50%;
        background: white;
        top: 2px; left: 2px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        transition: left 0.2s ease;
    }
    .cancel-toggle input:checked ~ .cp-toggle-switch {
        background: var(--mint-deep);
    }
    .cancel-toggle input:checked ~ .cp-toggle-switch::after {
        left: 12px;
    }
    .cancel-toggle input:focus-visible ~ .cp-toggle-switch {
        outline: 2px solid var(--mint-deep);
        outline-offset: 2px;
    }

    /* [index_24] 거래량 패널 지역 토글 (울산 ⚪ 부산) — 상세 패널 분양가/프리미엄 스위치와 동형, 활성색 민트 */
    .tx-region-row { display: flex; justify-content: center; margin-bottom: 12px; }
    .tx-region-switch {
      display: inline-flex; align-items: center; gap: 8px;
      height: 29px; padding: 4px 12px; border-radius: 16px;
      border: 1px solid rgba(0,200,160,0.22); background: #fff; cursor: pointer;
      font-family: inherit; -webkit-tap-highlight-color: transparent;
      box-shadow: 0 2px 8px rgba(0,200,160,0.07);
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .tx-region-switch:hover { box-shadow: 0 4px 14px rgba(0,200,160,0.15); }
    .tx-region-switch .rs-label {
      font-size: 12px; font-weight: 600; color: var(--gray-400);
      transition: color 0.18s ease, font-weight 0.18s ease; user-select: none;
    }
    /* 기본(.on 없음): 울산(왼쪽) 강조 / .on: 부산(오른쪽) 강조 */
    .tx-region-switch:not(.on) .rs-left  { color: var(--gray-700); font-weight: 800; }
    .tx-region-switch.on .rs-right       { color: var(--gray-700); font-weight: 800; }
    .tx-region-switch .rs-track {
      position: relative; width: 34px; height: 20px; border-radius: 10px;
      background: var(--gray-200); transition: background-color 0.2s ease; flex: 0 0 auto;
    }
    .tx-region-switch .rs-knob {
      position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
      background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s ease;
    }
    .tx-region-switch.on .rs-track { background: var(--mint-deep); }
    .tx-region-switch.on .rs-knob  { transform: translateX(14px); }
    .tx-region-switch:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }

    .tp-list-area {
        flex: 1;
        overflow-y: auto;
        padding: 0 10px 10px 10px;
        background: #f5f5f5;
    }

    /* ===== [좌측 동/평형 패널] ===== */
    .dongAreaPanel {
      position: absolute;
      top: 0;
      left: calc((var(--dong-area-panel-width, 420px) + 20px) * -1);
      width: var(--dong-area-panel-width, 420px);
      height: 100%;
      background: #fafafa;
      box-shadow: 4px 0 20px rgba(0,0,0,0.12);
      z-index: 2100;
      transition: left 0.3s ease, width 0.15s ease;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .dongAreaPanel.open {
      left: 0;
    }

    .dongAreaResizeHandle {
      position: absolute;
      top: 0;
      right: 0;
      width: 12px;
      height: 100%;
      cursor: ew-resize;
      z-index: 30;
      touch-action: none;
    }

    .dongAreaResizeHandle::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 5px;
      width: 2px;
      background: rgba(0,0,0,0.08);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .dongAreaPanel.open .dongAreaResizeHandle:hover::before,
    body.resizing-dong-panel .dongAreaResizeHandle::before {
      opacity: 1;
    }

    body.resizing-dong-panel .dongAreaPanel,
    body.resizing-dong-panel #sideFilters,
    body.resizing-dong-panel #brandList,
    body.resizing-dong-panel #stationList,
    body.resizing-dong-panel #schoolDistList,
    body.resizing-dong-panel #bigList,
    body.resizing-dong-panel #newList {
      transition: none !important;
    }

    .dap-topbar {
      position: sticky;
      top: 0;
      z-index: 5;
      background: rgba(255,255,255,0.97);
      border-bottom: 1px solid #e6e6e6;
      backdrop-filter: blur(8px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .dap-topbar-inner {
      padding: 14px 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dap-header-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .dap-title {
      min-width: 0;
      line-height: 1.2;
    }

    .dap-title h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 800;
      color: #111;
      word-break: keep-all;
    }

    .dap-title .sub {
      margin-top: 6px;
      font-size: 12px;
      color: #666;
    }

    .dap-closeBtn {
      flex: 0 0 auto;
      height: 34px;
      border-radius: 17px;
      border: 1px solid rgba(0,0,0,0.12);
      background: #fff;
      color: #111;
      font-size: 13px;
      font-weight: 700;
      padding: 0 14px;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
      transition: box-shadow 0.2s ease, background 0.2s ease;
    }

    .dap-closeBtn:hover {
      background: #f5f5f5;
      box-shadow: 0 4px 14px rgba(0,0,0,0.13);
    }

    /* [index_24_1] .dap-selector CSS 제거 — 드롭다운 DOM 삭제(명단 API 은퇴)에 따라 전용 규칙 5개 일괄 삭제 */

    /* [v16] 섹션 컬러 팔레트 — CSS 변수 */
    .dap-section-header {
      --c1-mint: #10b981;
      --c1-mint-deep: #006b55;
      --c1-mint-light: #d1fae5;
      --c2-apricot: #fb923c;
      --c2-apricot-deep: #c2410c;
      --c2-apricot-light: #fed7aa;
    }

    /* [27_31] 담백화(요청 1·6) — 스티키/배경/테두리/그림자/전폭 음수마진 제거 → 일반 제목 */
    .dap-section-header {
      background: transparent;
      padding: 0;
      margin: 0 0 12px 0;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 800;
      color: #111;
      letter-spacing: -0.02em;
    }
    .dap-section-header:first-child { margin-top: 0; }
    .dap-section-header .dap-section-bar {
      width: 4px;
      height: 22px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .dap-section-header .dap-section-ico {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .dap-section-header .dap-section-ico svg {
      width: 18px;
      height: 18px;
    }
    /* [27_29] 시세 추이 헤더 우측 '층 분포' 토글 버튼 */
    .dap-floor-toggle {
      margin-left: auto;
      font-size: 11px; font-weight: 700; color: #4b5563;
      background: #fff; border: 1px solid rgba(0,0,0,0.14);
      border-radius: 999px; padding: 4px 11px; cursor: pointer;
      letter-spacing: -0.01em; white-space: nowrap;
    }
    .dap-floor-toggle.on { background: rgb(0,255,204); border-color: rgba(0,0,0,0.08); color: #000; }
    .dap-floor-toggle:active { transform: scale(0.97); }

    .dap-section-header.c1 .dap-section-bar { background: #10b981; }
    .dap-section-header.c1 .dap-section-ico svg { stroke: #006b55; }
    .dap-section-header.c2 .dap-section-bar { background: #fb923c; }
    .dap-section-header.c2 .dap-section-ico svg { stroke: #c2410c; }

    /* ===== [v22] 분양가/프리미엄 위젯 (디자인: 시안 AC 믹스 — 층탭 그리드 + 평형 2행 스크롤) ===== */
    .bunyang-wrap { width: 100%; margin-top: 4px; }
    .bunyang-card {
      position: relative; border: 1px solid rgba(136,135,128,0.18); border-radius: 16px;
      padding: 12px 13px 14px; background: linear-gradient(180deg,#fff 0%,#fffefa 100%);
    }
    /* 상단: 표시건수(좌) ←→ 보기 토글(우) */
    .bunyang-card-top {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      margin-top: 4px; margin-bottom: 10px; padding-top: 10px; border-top: 1px solid rgba(136,135,128,0.12);
    }
    .bunyang-card-hdr { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .bunyang-vcount { font-size: 11px; font-weight: 800; color: #77736a; }

    /* 보기 토글 스위치 (분양가 ↔ 프리미엄) */
    .bunyang-view-toggle-wrap { display: flex; justify-content: flex-end; margin: 0; flex: 0 0 auto; }
    .bunyang-view-switch {
      display: inline-flex; align-items: center; gap: 8px;
      height: 29px; padding: 4px 10px; border-radius: 16px;
      border: 1px solid rgba(194,65,12,0.20); background: #fff; cursor: pointer;
      font-family: inherit; -webkit-tap-highlight-color: transparent;
      box-shadow: 0 2px 8px rgba(194,65,12,0.06);
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .bunyang-view-switch:hover { box-shadow: 0 4px 14px rgba(194,65,12,0.13); }
    .bunyang-view-switch .vs-label {
      font-size: 12px; font-weight: 600; color: #9a988f;
      transition: color 0.18s ease, font-weight 0.18s ease; user-select: none;
    }
    /* 분양가 보기(기본): 왼쪽 라벨 강조 / 프리미엄 보기(.on): 오른쪽 라벨 강조 */
    .bunyang-view-switch:not(.on) .vs-left  { color: #c2410c; font-weight: 800; }
    .bunyang-view-switch.on .vs-right        { color: #c2410c; font-weight: 800; }
    .bunyang-view-switch .vs-track {
      position: relative; width: 34px; height: 20px; border-radius: 10px;
      background: #d8d5cd; transition: background-color 0.2s ease; flex: 0 0 auto;
    }
    .bunyang-view-switch .vs-knob {
      position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
      background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s ease;
    }
    .bunyang-view-switch.on .vs-track { background: #fb923c; }
    .bunyang-view-switch.on .vs-knob  { transform: translateX(14px); }

    /* 필터 묶음 (층탭 + 평형) */
    .bunyang-filter-box { margin: 0; }
    /* 층 구분 탭: 3열 그리드 (5개 탭이 3+2로 2행 배치, 칸 넉넉) */
    .bunyang-floor-tabs {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px;
    }
    .bunyang-floor-tab {
      border: 1px solid rgba(136,135,128,0.22); background: #fff; color: #2C2C2A;
      border-radius: 16px; padding: 5px 11px; width: 100%; cursor: pointer;
      font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      font-size: 11.5px; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap;
      box-shadow: 0 1px 4px rgba(36,32,24,0.04);
      transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    }
    .bunyang-floor-tab strong { font-size: 10px; color: #888; font-weight: 600; }
    .bunyang-floor-tab:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(36,32,24,0.08); }
    .bunyang-floor-tab.active { background: #fff4ec; border-color: #f2b17d; color: #c2410c; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(251,146,60,0.10); }
    .bunyang-floor-tab.active strong { color: #d97706; }

    /* 평형 범례: 2행 + 가로 스크롤 */
    .bunyang-type-legend {
      margin: 0 0 10px; padding: 8px 9px 10px;
      display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: max-content;
      gap: 6px; justify-content: flex-start; overflow-x: auto; overflow-y: hidden;
      border: 1px solid rgba(136,135,128,0.12); border-radius: 13px; background: #fffdf9;
      -webkit-overflow-scrolling: touch; scrollbar-width: none;   /* [27_32] 요청 4 — 평소 숨김 */
    }
    .bunyang-type-legend::-webkit-scrollbar { display: none; }   /* [27_32] 요청 4 */
    .bunyang-type-legend::-webkit-scrollbar-thumb { background: rgba(136,135,128,0.25); border-radius: 999px; }
    /* [27_32] 요청 4 — 드래그/스크롤 중에만 잠깐 노출 */
    .bunyang-type-legend.scrolling { scrollbar-width: thin; }
    .bunyang-type-legend.scrolling::-webkit-scrollbar { display: block; height: 4px; }
    .bunyang-leg-item {
      flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 11px; border-radius: 16px; border: 1px solid rgba(136,135,128,0.22);
      background: #fff; cursor: pointer; font-size: 11.5px; color: #2C2C2A;
      box-shadow: 0 1px 4px rgba(36,32,24,0.04);
      transition: all 0.15s; user-select: none;
    }
    .bunyang-leg-item:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(36,32,24,0.08); }
    .bunyang-leg-item.off { opacity: 0.4; background: #f4f3ee; text-decoration: line-through; }
    .bunyang-leg-item .sw { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .bunyang-leg-item .cnt { font-size: 10px; color: #888; }
    .bunyang-leg-item .avg { font-size: 10px; color: #b86b00; font-weight: 600; }
    .bunyang-leg-item.off .avg, .bunyang-leg-item.off .cnt { color: #aaa; }

    .bunyang-desc {
      display: none;   /* [27_32] 요청 5 — 주황 안내박스('분양가 보기: …') 통째 삭제 */
      margin: 0 0 10px; background: #fdf3ec; border-left: 0;
      padding: 8px 10px; font-size: 11px; color: #7a4a28; border-radius: 10px;
    }
    .bunyang-desc strong { color: #c2410c; }
    .bunyang-chart-wrap {
      position: relative; width: 100%; height: 330px; border-radius: 13px; background: #fff;
      box-shadow: inset 0 0 0 1px rgba(136,135,128,0.06);
    }
    .bunyang-shape-legend {
      display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px;
      font-size: 10px; color: #5F5E5A; justify-content: center;
    }
    .bunyang-shape-legend span { display: inline-flex; align-items: center; gap: 4px; }
    .bunyang-shape-legend .tr {
      display: inline-block; width: 0; height: 0;
      border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #666;
    }
    /* [v22] 분양가(정확)=꽉 찬 세모 / 분양가(평균)=속 빈 세모 */
    .bunyang-shape-legend .tr-full {
      display:inline-block; width:0; height:0;
      border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:9px solid #888;
    }
    .bunyang-shape-legend .tr-open {
      display:inline-block; width:10px; height:9px; position:relative; border:0;
    }
    .bunyang-shape-legend .tr-open::before {
      content:''; position:absolute; left:0; top:0; width:0; height:0;
      border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:9px solid #888;
    }
    .bunyang-shape-legend .tr-open::after {
      content:''; position:absolute; left:2px; top:3px; width:0; height:0;
      border-left:3px solid transparent; border-right:3px solid transparent; border-bottom:5.4px solid #fff;
    }
    .bunyang-shape-legend .ci { display:inline-block; width:9px; height:9px; border-radius:50%; background:#888; }
    .bunyang-shape-legend .da { display:inline-block; width:14px; border-top:1px dashed #888; }
    .bunyang-xrange-slot { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(136,135,128,0.12); }
    .bunyang-xrange-slot .xrange-block { margin-top: 0; }
    /* 분양가 슬롯 안에서만 프리셋 좌측 정렬 (다른 차트의 .xrange-presets엔 영향 없음) */
    .bunyang-xrange-slot .xrange-presets { justify-content: flex-start; }
    .bunyang-xrange-slot .xrange-presetBtn.active { background:#fff3e9; border-color:#f0b07e; color:#c2410c; box-shadow:inset 0 0 0 1px rgba(251,146,60,0.10); }

    /* [v22] 분양가 전용 external tooltip (시세 추이와 동일한 알파/경계선/그림자는 JS에서 인라인 지정.
       여기서는 레이아웃·스크롤만 담당) */
    .bunyang-tooltip {
      position: absolute; pointer-events: none; opacity: 0; z-index: 99999;
      font-family: inherit; font-size: 12px; line-height: 1.45;
      border-radius: 8px; overflow: hidden; width: 248px;
      transition: opacity 0.1s ease, left 0.05s linear, top 0.05s linear;
      transform: translateY(-100%) translateY(-10px);
      backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    }
    .bunyang-tooltip .bn-tt-head { padding: 9px 11px; }
    .bunyang-tooltip .bn-tt-title { font-size: 12.5px; font-weight: 800; }
    .bunyang-tooltip .bn-tt-rows { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }
    .bunyang-tooltip .bn-tt-row { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
    .bunyang-tooltip .bn-tt-row .v { font-weight: 700; }
    .bunyang-tooltip .bn-tt-nodata { padding: 4px 11px 11px; font-weight: 600; opacity: 0.85; }
    .bunyang-tooltip .bn-tt-detail-label {
      font-size: 10px; font-weight: 700; opacity: 0.72; padding: 7px 11px 3px;
      border-top: 1px solid rgba(0,0,0,0.08);
    }
    .bunyang-tooltip .bn-tt-list {
      max-height: 320px; overflow-y: auto; padding: 0 11px 10px; font-size: 11px; line-height: 1.5;
    }
    .bunyang-tooltip .bn-tt-list::-webkit-scrollbar { width: 6px; }
    .bunyang-tooltip .bn-tt-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
    .bunyang-tooltip .bn-tt-dong { display: flex; gap: 6px; padding: 1px 0; }
    .bunyang-tooltip .bn-tt-dong .dn { font-weight: 700; flex-shrink: 0; min-width: 36px; opacity: 0.9; }
    .bunyang-tooltip .bn-tt-dong .hs { opacity: 0.82; }
    /* 좁은 화면: 층탭 3열 → 2열 (칸 폭 확보) */
    @media (max-width: 480px) {
      .bunyang-floor-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* [v16] 면적 배지 색상 분기 */
    .dap-area-badge.c1 {
      background: #d1fae5;
      color: #006b55;
    }
    .dap-area-badge.c2 {
      background: #fed7aa;
      color: #c2410c;
    }

    .dap-container {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden; //26년 6월 15일 수정 : 패널 좌, 우 안 밀리게
      scrollbar-gutter: stable; //26년 6월 15일 수정
      padding: 16px;
      background: #fff;   /* [27_31] 요청 6 — 흰색 바탕 */
    }

    .dap-card {
      /* [27_35] 동별 카드 복원 — 분양가·시세추이 카드와 동일 스타일로 통일 */
      position: relative;
      border: 1px solid rgba(136,135,128,0.18);
      border-radius: 16px;
      padding: 12px 13px 14px;
      background: linear-gradient(180deg,#fff 0%,#fffefa 100%);
      margin-bottom: 24px;
      box-shadow: none;
    }

    .dap-card:hover {
      box-shadow: none;                    /* [27_35] 다른 카드와 동일(호버 효과 없음) */
    }

    .dap-card h2 {
      margin: 0 0 14px 0;
      font-size: 15px;
      font-weight: 800;
      color: #111;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .dap-area-badge {
      display: inline-block;
      background: rgba(0,255,204,0.18);
      color: #006b55;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 20px;
    }

    .dap-hint {
      color: #999;
      font-size: 11px;
      margin: 10px 0 0 0;
      padding-left: 2px;
    }

    .dap-table-wrap {
      overflow-x: auto;
      border-radius: 0;                    /* [27_31] 요청 6 */
      background: #fff;
      border: none;
    }

    .dap-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 12px;
      min-width: 720px;
      background: #fff;
    }

    .dap-table thead th {
      position: sticky;
      top: 0;
      background: #fff;   /* [27_31] 요청 5 */
      z-index: 1;
      border-bottom: 2px solid #e0e0e0;
      font-weight: 700;
      color: #555;
      font-size: 11px;
      letter-spacing: 0.02em;
      text-align: center;
    }

    .dap-table th,
    .dap-table td {
      border-right: none;
      border-bottom: 1px solid #f0f0f0;
      padding: 9px 10px;
      vertical-align: top;
      white-space: nowrap;
    }

    .dap-table th:last-child,
    .dap-table td:last-child {
      border-right: none;
    }

    .dap-table tbody tr:last-child td {
      border-bottom: none;
    }

    .dap-table tbody tr { transition: background 0.15s ease; }
    .dap-table tbody tr:nth-child(even) { background: #fff; }   /* [27_31] 요청 5 */
    .dap-table tbody tr:hover td { background: rgba(0,255,204,0.08); }

    .dap-table th:first-child,
    .dap-table td:first-child {
      position: sticky;
      left: 0;
      z-index: 2;
    }

    .dap-table tbody tr:nth-child(odd) td:first-child { background: #fff; }
    .dap-table tbody tr:nth-child(even) td:first-child { background: #fff; }   /* [27_31] 요청 5 */
    .dap-table tbody tr:hover td:first-child { background: rgba(0,255,204,0.08); }

    .dap-table th:first-child {
      z-index: 3;
      background: #fff;   /* [27_31] 요청 5 */
      text-align: left;
    }

    .dap-date {
      text-align: left;
      font-weight: 600;
      color: #555;
      font-size: 11.5px;
    }

    .dap-num {
      text-align: right;
      font-weight: 600;
      color: #222;
    }

    .dap-chart-wrap {
      margin-top: 16px;
      height: 380px;
      padding: 8px 0;
      position: relative; /* [v16_4] external tooltip의 absolute 기준점 */
    }

    .dap-loading {
      padding: 18px;
      color: #666;
      font-size: 14px;
    }

    .dap-error {
      padding: 18px;
      color: #b00020;
      background: #fff0f1;
      border: 1px solid #ffd2d7;
      border-radius: 12px;
      font-size: 14px;
    }


    /* ===== [모바일 반응형 스타일 수정 (Mobile)] ===== */
    @media (max-width: 768px) {
        .transactionPanel {
            width: 100%;
            height: auto;
            max-height: 38%;
            top: auto;
            bottom: -50%;
            right: 0 !important;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
            transition: bottom 0.3s ease;
        }

        .dongAreaPanel {
            width: 100%;
            left: -100%;
            box-shadow: 6px 0 24px rgba(0,0,0,0.18);
        }

        .dongAreaPanel.open {
            left: 0;
        }

        .dongAreaResizeHandle {
            display: none;
        }

        .transactionPanel.open {
            bottom: 0;
            right: 0;
        }

        .transactionPanel.open.minimized {
            bottom: -100vh;
        }

        #rightFilters {
            transition: none;
        }

        .tp-header {
            display: none;
        }

        .control-panel {
            /* [v15] 시안 D 적용: 모바일에서도 white bg + mint top accent 유지
               단 좌우 모서리 둥글게(20px) - 패널 상단 시각 표현 */
            margin: 0;
            border-radius: 20px 20px 0 0;
            box-shadow: none;
            padding: 12px 14px 10px;
            border-bottom: 1px solid #eee;
        }

        /* [v15] 모바일은 좁으므로 헤더 간격 약간 컴팩트하게 */
        .cp-head {
            margin-bottom: 8px;
            gap: 10px;
        }
        .cp-left {
            padding-right: 10px;
        }
        .cp-num {
            font-size: 22px;
        }
        .date-display {
            font-size: 12.5px;
        }

        .slider-container {
            height: 16px;
        }
        .slider-handle {
            width: 16px;
            height: 16px;
        }

        .helper-text {
            display: none;
        }

        .status-bar {
            margin: 4px 5px;
            font-size: 0.82em;
        }

        /* 모바일 테이블: min-width 제거하여 가격이 바로 보이도록 */
        .dap-table {
            min-width: unset;
            font-size: 11px;
        }

        .dap-table th,
        .dap-table td {
            padding: 7px 6px;
        }

        .dap-table thead th {
            font-size: 10px;
        }

        .dap-date {
            font-size: 10.5px;
        }
    }

    /* ===== [모바일 거래량 패널 최소화/복원 버튼] ===== */
    .tp-minimize-btn,
    .tp-restore-btn {
      display: none;
    }

    @media (max-width: 768px) {
      .tp-minimize-btn {
        display: none;
        position: absolute;
        top: -44px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,0.6);
        color: #fff;
        font-size: 13px;
        cursor: pointer;
        box-shadow: 0 3px 12px rgba(0,0,0,0.25);
        align-items: center;
        justify-content: center;
        user-select: none;
        transition: background 0.2s ease;
      }

      .tp-minimize-btn.visible {
        display: flex;
      }

      .tp-minimize-btn:active {
        background: rgba(0,0,0,0.8);
      }

      .tp-restore-btn {
        display: none;
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1600;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,0.6);
        color: #fff;
        font-size: 13px;
        cursor: pointer;
        box-shadow: 0 3px 12px rgba(0,0,0,0.25);
        align-items: center;
        justify-content: center;
        user-select: none;
        transition: background 0.2s ease, transform 0.2s ease;
      }

      .tp-restore-btn:active {
        transform: translateX(-50%) scale(0.92);
        background: rgba(0,0,0,0.8);
      }

      .tp-restore-btn.visible {
        display: flex;
      }
    }


    /* ===== [초등 학구도/통학로] ===== */
    #schoolPathOverlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 6;
    }
    #schoolPathOverlay svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    #schoolDistList {
      position: absolute;
      left: 110px;
      top: 220px;
      z-index: 2000;
      display: none;
      flex-direction: column;
      gap: 8px;
      user-select: none;
      transition: left 0.3s ease;
    }

    .schoolDistBtn {
      width: 90px;
      height: 34px;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,0.15);
      background: #fff;
      color: #111;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.10);
      cursor: pointer;
      outline: none;
      white-space: nowrap;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .schoolDistBtn:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.18);
      transform: translateY(-1px);
    }
    .schoolDistBtn.selected {
      background: rgb(0,255,204);
      border-color: rgba(0,0,0,0.08);
      color: #000;
    }

    /* ===== [26_10] 대단지/신축 목록 버튼 (역세권/초등 패턴 동일) ===== */
    #bigList, #newList {
      position: absolute;
      left: 110px;
      z-index: 2000;
      display: none;
      flex-direction: column;
      gap: 8px;
      user-select: none;
      transition: left 0.3s ease;
    }
    #bigList { top: 94px; }   /* 사이드 '대단지' 버튼(3번째) 높이에 정렬 */
    #newList { top: 136px; }  /* 사이드 '신축' 버튼(4번째) 높이에 정렬 */
    .bigSdsBtn, .newAgeBtn {
      width: 90px;
      height: 34px;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,0.15);
      background: #fff;
      color: #111;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.10);
      cursor: pointer;
      outline: none;
      white-space: nowrap;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .bigSdsBtn:hover, .newAgeBtn:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.18);
      transform: translateY(-1px);
    }
    .bigSdsBtn.selected, .newAgeBtn.selected {
      background: rgb(0,255,204);
      border-color: rgba(0,0,0,0.08);
      color: #000;
    }

    .schoolLabel {
      position: relative;
      top: 8px;
      background: #fff;
      color: #1a1a1a;
      padding: 3px 8px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      pointer-events: none;
      font-family: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, sans-serif;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
      border: 1px solid rgba(0,0,0,0.08);
    }
    .schoolLabel.shared {
      background: #fff !important;
    }

    #schoolDisclaimer {
      display: none;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2000;
      background: rgba(255, 248, 225, 0.96);
      color: #6d5300;
      border: 1px solid rgba(200, 170, 50, 0.4);
      border-radius: 10px;
      padding: 8px 32px 8px 14px;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.5;
      text-align: center;
      box-shadow: 0 2px 12px rgba(0,0,0,0.12);
      pointer-events: none;
      white-space: normal;
      width: 100%;
      max-width: 100vw;
      box-sizing: border-box;
    }
    #schoolDisclaimerClose {
      position: absolute;
      top: 4px;
      right: 6px;
      width: 22px;
      height: 22px;
      padding: 0;
      border: none;
      background: transparent;
      color: #6d5300;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      pointer-events: auto;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease;
    }
    #schoolDisclaimerClose:hover {
      background: rgba(0,0,0,0.08);
    }

    @media (max-width: 768px) {
      #schoolDisclaimer {
        font-size: 12px;
        padding: 6px 28px 6px 10px;
        max-width: 85vw;
      }
    }

    @property --school-label-pulse-pct {
      syntax: '<percentage>';
      inherits: true;
      initial-value: 0%;
    }
    @keyframes schoolLabelGlobalPulse {
      0%, 100% { --school-label-pulse-pct: 0%; }
      50%      { --school-label-pulse-pct: 100%; }
    }
    body.school-label-pulse-active {
      animation: schoolLabelGlobalPulse 1.2s ease-in-out infinite;
    }
    .aptLabel.school-nearby {
      transition: box-shadow 0.2s ease, transform 0.2s ease;
      background-color: color-mix(
        in srgb,
        #fff calc(100% - var(--school-label-pulse-pct, 0%)),
        rgb(var(--school-pulse-rgb, 244,196,48)) var(--school-label-pulse-pct, 0%)
      );
      border: 1px solid rgba(0,0,0,0.12);
      color: #111;
    }

    @keyframes schoolPathFlow {
      from { stroke-dashoffset: 0; }
      to   { stroke-dashoffset: -0.2; }
    }
    .schoolPathBase {
      fill: none;
      stroke: #fff;
      stroke-opacity: 0.55;
      stroke-linecap: round;
    }
    .schoolPathFlow {
      fill: none;
      stroke: rgb(var(--school-line-rgb, 244,196,48));
      stroke-opacity: 0.95;
      stroke-linecap: round;
      stroke-dasharray: 0.05 0.15;
      animation: schoolPathFlow 1.5s linear infinite;
    }

    /* ===== [역세권 경고 배너] ===== */
    #stationDisclaimer {
      display: none;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2000;
      background: rgba(255, 248, 225, 0.96);
      color: #6d5300;
      border: 1px solid rgba(200, 170, 50, 0.4);
      border-radius: 10px;
      padding: 8px 32px 8px 14px; /* [v14_9] 우측 닫기 버튼 자리 확보 */
      font-size: 13px;
      font-weight: 600;
      line-height: 1.5;
      text-align: center;
      box-shadow: 0 2px 12px rgba(0,0,0,0.12);
      pointer-events: none;
      max-width: 90vw;
      white-space: normal;
      width: 100%;
      max-width: 100vw;
      box-sizing: border-box;
    }

    /* [v14_9] 경고 배너 닫기 버튼 */
    #stationDisclaimerClose {
      position: absolute;
      top: 4px;
      right: 6px;
      width: 22px;
      height: 22px;
      padding: 0;
      border: none;
      background: transparent;
      color: #6d5300;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      pointer-events: auto;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease;
    }
    #stationDisclaimerClose:hover {
      background: rgba(0,0,0,0.08);
    }

    @media (max-width: 768px) {
      #stationDisclaimer {
        font-size: 12px;
        padding: 6px 28px 6px 10px; /* [v14_9] 모바일도 우측 여유 */
        white-space: normal;
        max-width: 85vw;
      }
    }

    .status-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 5px;
        font-size: 0.9em;
        color: #666;
    }

    /* [v14_10] tp-list-area 내부의 status-bar는 숨김 (result-count는 cp-head로 이동됨) */
    .tp-list-area .status-bar {
        display: none;
    }
    /* [v15] cp-date-group, cp-result-count 클래스는 시안 D 마크업으로 교체되어 더이상 사용 안 함
       — 잔여 셀렉터 제거 */

    ul#list-container { list-style: none; padding: 0; margin: 0; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
    li.trans-item {
        background: white;
        border-bottom: 1px solid #eee;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background 0.15s ease;
    }
    li.trans-item:hover { background: rgba(0,255,204,0.05); }
    li.trans-item:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; }
    li.trans-item:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom: none; }

    .apt-name { font-size: 1.05em; font-weight: bold; }
    .apt-sub { font-size: 0.8em; color: #888; margin-top: 4px; }
    .price { font-weight: bold; color: #d32f2f; font-size: 1.0em; }
    .loading-msg { text-align: center; padding: 20px; color: #888; }

    .source-tag {
      display: inline-block;
      font-size: 0.7em;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      margin-left: 6px;
      vertical-align: middle;
    }
    .source-tag.apt { background: rgba(0,255,204,0.35); color: #006b55; }
    .source-tag.silv { background: rgba(255,174,0,0.35); color: #7a4d00; }

    /* ===== [지도 마커/라벨] ===== */
    .aptLabel {
      position: relative;
      bottom: 32px;
      background: rgba(0,0,0,0.78);
      color: #222; 
      padding: 7px 9px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      white-space: nowrap;
      font-size: 13px;
      font-weight: 700;
      pointer-events: auto;
      cursor: pointer;
      user-select: none;
      font-family: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, sans-serif;
      transition: background-color 0.3s ease, box-shadow 0.2s ease, transform 0.2s ease;
      border: 1px solid rgba(0,0,0,0.05);
    }

    .aptLabel:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    }

    /* [index_20_2] 이름창 배경 시세 추이 스파크라인: 배경색 위에 깔리고 텍스트는 그 위에 그려짐 */
    .aptLabel.has-trend {
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }

    /* ===== [index_26_7] 분양권 라벨 크레인 (시안 crane_realsize.html 이식) =====
       - .aptLabel(position:relative) 안의 절대배치 자식. 라벨 위로 오버플로하며 pointer-events:none.
       - 애니메이션은 CSS가 아니라 JS(rAF + 전역 craneEpoch)가 구동 → 여기엔 @keyframes 없음.
         (Kakao CustomOverlay 재부착·매 idle 재생성 시 CSS 위상이 0으로 리셋되는 문제 회피. 역세권 레이더와 동일 패턴)
       - 조정: 크기 --crane-scale / 색 --crane-accent 는 여기서, 속도(주기)는 JS의 CRANE_PERIOD_MS. */
    .crane {
      --crane-scale: 0.6;          /* 기본 0.6(최소) — 라벨 대비 균형 */
      --crane-accent: #00E5CC;     /* 기본 주황 */
      position: absolute;
      bottom: calc(100%);    /* 라벨 윗변 위로 (3px 겹침) */
      left: -10px;
      width: 172px; height: 103px;
      overflow: visible;
      color: var(--crane-accent);
      z-index: 3;
      pointer-events: none;        /* 클릭은 라벨로 통과 */
      transform: scale(var(--crane-scale));
      transform-origin: left bottom;
    }
    .crane path, .crane line, .crane rect { stroke-linecap: round; stroke-linejoin: round; }
    .crane path, .crane line { stroke: currentColor; fill: none; stroke-width: 2.0; }
    .crane .cr-cable { stroke-width: 1.0; }
    .crane .cr-fill  { fill: currentColor; stroke: none; }
    .crane .cr-bldg  { fill: none; stroke: currentColor; stroke-width: 1.0; }
    .crane .cr-wd    { fill: none; stroke: currentColor; stroke-width: 1.0; }
    /* 후크/층 transform 기준점만 CSS로 고정 (값은 JS가 매 프레임 인라인으로 설정) */
    .crane .cr-hook  { transform-box: view-box; transform-origin: 100px 43px; }
    .crane .cr-floor { transform-box: fill-box; transform-origin: center; }

    /* [index_20_5] 좌측 하단 미니 트렌드 표시 토글 ([index_20_6] 텍스트 고정 + 슬라이딩 스위치) */
    #miniTrendToggle {
      position: fixed;
      left: 12px;
      bottom: 40px;
      z-index: 1600;
      height: 34px;
      padding: 0 10px 0 14px;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,0.15);
      background: #fff;
      color: #111;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0,0,0,0.12);
      display: flex;
      align-items: center;
      gap: 9px;
      font-family: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, sans-serif;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    #miniTrendToggle .mt-switch {
      position: relative;
      width: 38px;
      height: 22px;
      border-radius: 11px;
      background: #d1d5db;           /* OFF: 회색 트랙 */
      transition: background-color 0.2s ease;
      flex: 0 0 auto;
    }
    #miniTrendToggle .mt-knob {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
      transition: transform 0.2s ease;
    }
    #miniTrendToggle.on .mt-switch {
      background: #00E5CC;           /* ON: 민트 트랙 */
    }
    #miniTrendToggle.on .mt-knob {
      transform: translateX(16px);   /* ON: 노브 오른쪽 이동 */
    }
    #miniTrendToggle.on {
      border-color: rgba(0,229,204,0.5);
    }
    #miniTrendToggle:hover {
      box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    }

    .count-badge {
        display: inline-block;
        margin-left: 4px;
        font-size: 0.9em;
        font-weight: 600;
        color: #555;
    }

    @keyframes newBadgeBlink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.15; }
    }

    .new-badge {
        position: absolute;
        top: -8px;
        left: -4px;
        font-size: 9px;
        font-weight: 500;
        color: #ff3b30;
        line-height: 1;
        pointer-events: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        animation: newBadgeBlink 1s ease-in-out infinite;
    }

    /* [index_26_8] 분양 중 단지 라벨 우상단 '분양' 배지 — new 배지(.new-badge)와 동형(폰트/깜빡임 동일),
       위치만 좌상단 → 우상단(right:-4px), 색만 #9900FF(보라). newBadgeBlink 재사용. */
    .bunyang-badge {
        position: absolute;
        top: -8px;
        right: -4px;
        font-size: 9px;
        font-weight: 500;
        color: #9900FF;
        line-height: 1;
        pointer-events: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        animation: newBadgeBlink 1s ease-in-out infinite;
    }

    /* ===== [index_26_11] 분양권 라벨 혜성 꼬리 스파크 (시안 spark_label_demo.html ② .s-comet 이식) =====
       - .aptLabel '첫 자식' 오버레이(래퍼 > 링). '분양' 배지와 병행 표시 — 게이트는 JS PRESALE_LABEL_STYLE.
       - 회전은 CSS @keyframes가 아니라 JS(rAF + sparkEpoch)가 --spark-a를 매 프레임 갱신 → @property/@keyframes 없음.
         (CustomOverlay 재부착·매 idle 재생성 시 CSS 위상이 0으로 리셋되는 문제 회피. 크레인·역세권 레이더와 동일 패턴)
       - 링은 마스크(content-box xor)로 중앙을 뚫어 라벨 밖 '띠'만 그림:
         라벨 배경이 반투명(rgba 0.95)이어도 혜성이 라벨 면으로 비치지 않고, :hover transform 스택 변화와도 무관.
       - 시안의 잔광(::after blur 레이어)은 마스크가 blur 번짐을 잘라내므로 래퍼의 drop-shadow로 대체.
       - 조정 손잡이: 띠 두께 --spark-w / 잔광 반경 --spark-glow / 색 --spark-accent(분양 배지와 동일 #9900FF).
         꼬리 길이는 아래 conic의 295deg 시작점(값↓=꼬리 길어짐). 속도는 JS SPARK_PERIOD_MS. */
    .bunyang-spark {
      --spark-w: 1px;              /* 띠(본체) 두께  ← 두께 조정 손잡이 */
      --spark-glow: 5px;           /* 잔광(drop-shadow) 번짐 반경 */
      --spark-accent: #9900FF;     /* 분양 배지(.bunyang-badge)와 동일 색 */
      position: absolute;
      inset: calc(var(--spark-w) * -1);           /* 라벨 사방 밖으로 띠 두께만큼 확장 */
      border-radius: calc(12px + var(--spark-w)); /* .aptLabel border-radius(12px) 추종 — 라벨 반경 변경 시 함께 조정 */
      pointer-events: none;                       /* 클릭은 라벨로 통과 */
      filter: drop-shadow(0 0 var(--spark-glow) var(--spark-accent));
    }
    .bunyang-spark-ring {
      position: absolute;
      inset: 0;
      box-sizing: border-box;
      border-radius: inherit;
      padding: var(--spark-w);                    /* content-box = 라벨 상자 → 아래 마스크가 이 안쪽을 제거 */
      /* 시안 .s-comet::before의 conic 각도 그대로: 꼬리(295°~) + 머리(346~360°, 끝 흰색) */
      background: conic-gradient(from var(--spark-a, 0deg),
        transparent 0deg, transparent 295deg,
        var(--spark-accent) 346deg, #fff 359deg, #fff 360deg);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
              mask-composite: exclude;
    }

    /* ===== [index_26_12] 신규거래(new) 라벨 젤리 바운스 (시안 spark_label_demo_3.html ⑤ .s-jelly 이식) =====
       - 모션은 CSS @keyframes가 아니라 JS(rAF + newtxJellyEpoch)가 매 프레임 인라인 transform으로 구동 → 여기엔 @keyframes 없음.
         (CustomOverlay 재부착·매 idle 재생성 시 CSS 위상이 0으로 리셋되는 문제 회피. 크레인·분양 스파크와 동일 패턴)
       - transition 재선언: .aptLabel의 transform 0.2s 트랜지션이 매 프레임 갱신을 뭉개므로(잔상/무름)
         transform만 목록에서 제외하고 background-color/box-shadow는 그대로 유지. (기존 .aptLabel 규칙 무수정 — 특이성으로 덮어씀)
         부작용: 이 클래스가 붙은 라벨은 :hover transform(-2px 들림)이 인라인 transform에 가려 미동작 — 바운스 중이라 의도된 트레이드.
       - 시안의 강조색 테두리(1.5px)는 이식 안 함(모션만) — new 빨강 표시는 기존 .new-badge가 담당.
       - 속도(주기)는 JS의 NEWTX_JELLY_PERIOD_MS, 점프 높이/눌림 정도는 NEWTX_JELLY_KF. */
    .aptLabel.newtx-jelly {
      transform-origin: bottom center;   /* 시안 ⑤와 동일 — 바닥 기준으로 눌리고 튀어오름 */
      transition: background-color 0.3s ease, box-shadow 0.2s ease;
      will-change: transform;
    }

    /* [v16_3] 시세 추이 거래 내역 표 거래일 셀 좌측 인라인 NEW 배지 */
    .dap-tx-new-badge {
        display: inline-block;
        margin-right: 4px;
        font-size: 9px;
        font-weight: 900;
        color: #ff3b30;
        line-height: 1;
        vertical-align: middle;
        letter-spacing: 0.5px;
        animation: newBadgeBlink 1s ease-in-out infinite;
    }

    #toast {
      position: absolute;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.75);
      color: #fff;
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 13px;
      display: none;
      z-index: 9999;
      pointer-events: none;
      white-space: nowrap;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }

    /* ===== [역세권 범위 내 아파트 펄스 애니메이션] ===== */
    @keyframes stationNearbyPulse {
      0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
      50% { box-shadow: 0 4px 12px rgba(0,123,255,0.45), 0 0 0 5px rgba(0,123,255,0.15); }
    }

    .aptLabel.station-nearby {
      /* [v11] 1.2초 일괄 점멸 제거 → 폴리곤과 동일하게 레이더 스윕이 단지를 훑을 때 JS가 box-shadow 구동.
         테두리는 '폴리곤 보유 단지' 표식으로 그대로 유지. (@keyframes stationNearbyPulse는 미사용이나 무해하여 보존) */
      border: 1.5px solid rgba(0,123,255,0.5);
    }

    /* ===== [역세권 마커/라벨] ===== */
    .metroLabel {
      position: relative;
      top: 8px;
      background: rgba(0, 123, 255, 0.92);
      color: #fff;
      padding: 3px 8px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      pointer-events: none;
      font-family: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, sans-serif;
      box-shadow: 0 2px 8px rgba(0,123,255,0.35);
    }

    /* ===== [역세권 레이더 — 모던 브랜드 블루] (metro_rader.html 시안2 이식) ===== */
    /* [v5] 0×0 래퍼: CustomOverlay 앵커 원점이 곧 역 좌표가 되도록 함 */
    .metro-radar-wrap {
      position: relative;
      width: 0;
      height: 0;
      pointer-events: none;
    }
    .metro-radar {
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-50%, -50%); /* [v5] 자체 크기 기준 중앙정렬 → 역 좌표에 정확히 일치 */
      border-radius: 50%;
      pointer-events: none;
      --mr-blue: #2f8fff;
      --mr-blue-soft: rgba(47,143,255,0.55);
      --mr-ring: rgba(47,143,255,0.28);
    }
    .metro-radar .mr-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px dashed var(--mr-ring);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
    }
    .metro-radar .mr-r2 { width: 50%;  height: 50%; }
    .metro-radar .mr-r3 { width: 75%;  height: 75%; }
    .metro-radar .mr-r4 { width: 100%; height: 100%; }
    .metro-radar .mr-cross {
      position: absolute;
      top: 50%; left: 50%;
      background: var(--mr-ring);
    }
    .metro-radar .mr-cross.h { width: 100%; height: 1px; transform: translate(-50%, -50%); }
    .metro-radar .mr-cross.v { height: 100%; width: 1px; transform: translate(-50%, -50%); }
    .metro-radar .mr-sweep {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      /* [v9] CSS animation 제거 → JS가 전역 시계로 transform 회전을 구동(DOM 재부착 시 12시 초기화 방지) */
      will-change: transform;
      background: conic-gradient(from 0deg,
        rgba(47,143,255,0) 0deg, rgba(47,143,255,0) 250deg,
        rgba(47,143,255,0.05) 300deg, rgba(47,143,255,0.22) 350deg, rgba(47,143,255,0.42) 360deg);
    }
    .metro-radar .mr-sweep-line {
      position: absolute;
      left: calc(50% - 1px);
      top: 0;
      width: 2px;
      height: 50%;
      transform-origin: bottom center;
      /* [v9] CSS animation 제거 → JS가 전역 시계로 transform 회전을 구동 */
      will-change: transform;
      background: linear-gradient(to top, transparent, var(--mr-blue));
      box-shadow: 0 0 12px 2px var(--mr-blue-soft);
      opacity: 0.85;
    }
    @keyframes mr-spin { to { transform: rotate(360deg); } }

    /* ===== [종합 시세 차트/테이블] ===== */
    .dap-summary-card {
      /* [27_34] 시세 추이 카드 복원 — 분양가 카드(.bunyang-card)와 동일 스타일로 통일 */
      position: relative;
      border: 1px solid rgba(136,135,128,0.18);
      border-radius: 16px;
      padding: 12px 13px 14px;
      background: linear-gradient(180deg,#fff 0%,#fffefa 100%);
      margin-bottom: 24px;
      box-shadow: none;
    }

    .dap-summary-card:hover {
      box-shadow: none;                    /* [27_34] 분양가 카드와 동일(호버 효과 없음) */
    }

    .dap-summary-card h2 {
      margin: 0 0 14px 0;
      font-size: 15px;
      font-weight: 800;
      color: #111;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* [index_26_1] 시세 추이: 모든 면적 시리즈를 동일 계층에서 복수 선택 */
    .dap-summary-filter-box {
      margin: 0 0 10px;
    }

    .dap-summary-group-tabs {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
      gap: 8px;
      margin-bottom: 9px;
    }

    .dap-summary-group-tab {
      min-width: 0;
      border: 1px solid rgba(0,107,85,0.16);
      background: #fff;
      color: #2c2c2a;
      border-radius: 16px;
      padding: 6px 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 11.5px;
      line-height: 1.2;
      white-space: nowrap;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
      transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    }

    .dap-summary-group-tab:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(0,107,85,0.09);
    }

    .dap-summary-group-tab strong {
      font-size: 10px;
      color: #8b938f;
      font-weight: 600;
    }

    .dap-summary-group-tab.active {
      background: #e9fff8;
      border-color: #68d9bd;
      color: #006b55;
      font-weight: 800;
      box-shadow: inset 0 0 0 1px rgba(16,185,129,0.08);
    }

    .dap-summary-group-tab.active strong {
      color: #159875;
    }

    .dap-summary-area-tabs {
      --summary-column-count: 1;
      --summary-button-width: 118px;
      margin: 0;
      padding: 7px 0 8px;                 /* [27_31] 박스 제거로 좌우 패딩 0 */
      display: block;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;              /* [27_31] 요청 2 — 가로 스크롤바 숨김(스크롤 기능은 유지) */
      border: none;                        /* [27_31] 요청 6 — 카드 테두리 제거 */
      border-radius: 0;
      background: transparent;             /* [27_31] 요청 6 — 틴트 배경 제거 */
    }

    /* [index_26_3] 면적대별 행은 유지하고 전체 영역을 스크롤 1개로 이동 */
    .dap-summary-area-tabs::-webkit-scrollbar { display: none; }   /* [27_31] 요청 2 — 스크롤바 숨김 */
    .dap-summary-area-tabs::-webkit-scrollbar-track { background: transparent; }
    .dap-summary-area-tabs::-webkit-scrollbar-thumb {
      background: rgba(76,84,80,0.55);
      border-radius: 999px;
    }
    /* [27_32] 요청 3 — 드래그/스크롤 중에만 잠깐 노출 */
    .dap-summary-area-tabs.scrolling { scrollbar-width: thin; }
    .dap-summary-area-tabs.scrolling::-webkit-scrollbar { display: block; height: 5px; }
    .dap-summary-area-tabs.scrolling::-webkit-scrollbar-thumb { background: rgba(76,84,80,0.55); border-radius: 999px; }

    .dap-summary-area-row {
      width: max-content;
      min-width: max-content;
      display: grid;
      grid-template-columns: repeat(var(--summary-column-count), var(--summary-button-width));
      align-items: center;
      gap: 7px;
      padding: 4px 0 6px;
    }

    .dap-summary-area-row + .dap-summary-area-row {
      padding-top: 7px;
      border-top: 1px solid rgba(0,107,85,0.09);
    }

    .dap-summary-area-btn {
      width: var(--summary-button-width);
      min-width: var(--summary-button-width);
      height: auto;
      min-height: 0;
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 6px;
      padding: 5px 11px;
      border-radius: 16px;
      border: 1px solid rgba(0,0,0,0.13);
      background: #f4f6f5;
      color: #7b817e;
      cursor: pointer;
      font-size: 11.5px;
      line-height: 1.2;
      white-space: nowrap;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03);
      transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
      user-select: none;
    }

    .dap-summary-area-btn > span:nth-child(2) {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
    }

    .dap-summary-area-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(0,0,0,0.07);
    }

    .dap-summary-area-btn.active {
      background: #fff;
      color: #222;
      border-color: rgba(0,107,85,0.23);
      font-weight: 700;
    }

    /* [index_26_5] 비선택 버튼은 취소선 (분양권 프리미엄 범례 .bunyang-leg-item.off와 동일 컨셉).
       색상점(.dap-summary-color-dot)은 atomic inline(inline-block)이라 취소선이 적용되지 않아 그대로 보임. */
    .dap-summary-area-btn:not(.active) {
      text-decoration: line-through;
    }

    .dap-summary-color-dot {
      width: 10px;
      height: 10px;
      display: inline-block;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--summary-dot-color, #00e5cc);
      border: 1px solid rgba(0,0,0,0.06);
      box-shadow: 0 0 0 2px rgba(255,255,255,0.92);
    }

    .dap-summary-area-btn:not(.active) .dap-summary-color-dot {
      opacity: 0.72;
    }

    .dap-summary-area-btn .cnt {
      font-size: 10px;
      color: #8b938f;
      font-weight: 600;
      text-align: right;
    }

    .dap-summary-area-btn.active .cnt {
      color: #4f6f66;
    }

    /* [index_26_6] 면적 버튼 행 접기: 기본 3행만 노출(나머지는 숨김), 펼치기/접기 토글로 전체 표시.
       토글(.dap-summary-rows-toggle)은 areaTabs의 형제라 nth-child 계산에 포함되지 않음. */
    .dap-summary-area-tabs.dap-rows-collapsed .dap-summary-area-row:nth-child(n+4) {
      display: none;
    }
    .dap-summary-rows-toggle {
      display: none; /* JS가 행 4개 이상일 때만 flex로 노출 */
      align-items: center;
      justify-content: center;
      gap: 5px;
      margin-top: 6px;
      padding: 6px 0;
      font-size: 11.5px;
      font-weight: 600;
      color: #4f6f66;
      cursor: pointer;
      user-select: none;
      border: 1px solid rgba(0,107,85,0.14);
      border-radius: 11px;
      background: #f4fbf8;
      transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    }
    .dap-summary-rows-toggle:hover {
      color: #006b55;
      background: #eaf7f1;
      border-color: rgba(0,107,85,0.30);
    }
    .dap-summary-rows-toggle .toggle-arrow {
      display: inline-flex;
      transition: transform 0.2s ease;
    }
    .dap-summary-rows-toggle.expanded .toggle-arrow {
      transform: rotate(180deg);
    }

    .dap-summary-xrange-slot {
      margin-top: 8px;
    }

    .dap-summary-chart-wrap {
      height: 240px;      /* [27_20] 기존 300px의 80% */
      padding: 8px 0;
      position: relative; /* [v16_4] external tooltip의 absolute 기준점 */
    }

    .dap-summary-table-section {
      display: none;
      margin-top: 14px;
    }

    .dap-summary-table-section.active {
      display: block;
    }

    /* [index_26_9] 거래량 OFF 거래표 더보기/감추기 토글 호스트(.dap-table-toggle 스타일 재사용) */
    .dap-summary-tx-more-host:empty { display: none; }

    .dap-summary-table-header {
      display: none;                       /* [27_31] 요청 4 — '기간 내 거래 내역 · 면적' 제목 + 날짜 배지 숨김 */
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .dap-summary-table-header h3 {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      color: #444;
    }

    .dap-summary-table-header .period-badge {
      display: inline-block;
      background: #eef2f5;
      color: #2c3e50;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 12px;
    }

    .dap-summary-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 12px;
      background: #fff;
      border-radius: 0;                    /* [27_31] 요청 6 */
      overflow: hidden;
      border: none;                        /* [27_31] 요청 6 */
    }

    .dap-summary-table thead th {
      background: #fff;   /* [27_31] 요청 5 — 흰색 통일 */
      border-bottom: 2px solid #e0e0e0;
      font-weight: 700;
      color: #555;
      font-size: 11px;
      text-align: center;
      padding: 8px 10px;
    }

    .dap-summary-table td {
      border-bottom: 1px solid #f0f0f0;
      padding: 8px 10px;
      text-align: center;
      white-space: nowrap;
      font-size: 12px;
    }

    .dap-summary-table tbody tr { transition: background 0.15s ease; }
    .dap-summary-table tbody tr:nth-child(even) { background: #fff; }   /* [27_31] 요청 5 */
    .dap-summary-table tbody tr:hover td { background: rgba(0,255,204,0.08); }
    .dap-summary-table tbody tr:last-child td { border-bottom: none; }

    .dap-summary-table .price-cell {
      text-align: right;
      font-weight: 600;
      color: #d32f2f;
    }

    .dap-summary-table .floor-cell {
      text-align: center;
      color: #555;
    }

    .dap-summary-table .area-cell {
      text-align: center;
      font-weight: 600;
      color: #006b55;
    }

    .dap-summary-no-data {
      text-align: center;
      padding: 16px;
      color: #999;
      font-size: 12px;
    }

    /* ===== [동별 테이블 접기/펼치기] ===== */
    .dap-table-wrap.collapsed tbody tr:nth-child(n+6) {
      display: none;
    }

    .dap-table-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px 0;
      font-size: 12px;
      font-weight: 600;
      color: #888;
      cursor: pointer;
      user-select: none;
      transition: color 0.2s ease;
      border-top: 1px solid #f0f0f0;
      background: #fff;
      border-radius: 0 0 10px 10px;
    }

    .dap-table-toggle:hover {
      color: #007bff;
    }

    .dap-table-toggle .toggle-arrow {
      font-size: 10px;
      transition: transform 0.2s ease;
    }

    .dap-table-toggle.expanded .toggle-arrow {
      transform: rotate(180deg);
    }

    /* ===== [x축 범위 슬라이더] ===== */
    .xrange-block {
      margin-top: 10px;
      padding: 10px 6px 2px 6px;
    }

    .xrange-label-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 11px;
      font-weight: 700;
      color: #666;
    }

    .xrange-label-row .xrange-title {
      color: #444;
    }

    .xrange-label-row .xrange-range-text {
      font-size: 11px;
      font-weight: 700;
      color: #006b55;
      background: rgba(0,255,204,0.12);
      padding: 3px 10px;
      border-radius: 10px;
    }

    /* [27_28] 두께를 층 조절바와 동일 규격으로 (트랙 2px / 채움 3px / 핸들 13px) */
    .xrange-slider-container {
      position: relative;
      width: 96%;
      height: 20px;
      margin: 0 auto;
      touch-action: none;
    }

    .xrange-slider-track {
      position: absolute;
      top: 50%; left: 0; right: 0; height: 2px;
      background: #e6ebe9; border-radius: 1px;
      transform: translateY(-50%);
    }

    .xrange-slider-fill {
      position: absolute;
      top: 50%; height: 3px;
      background: #00E5CC;
      transform: translateY(-50%);
      border-radius: 2px;
    }

    .xrange-slider-handle {
      position: absolute;
      top: 50%;
      width: 13px; height: 13px;
      background: #fff;
      border: 2px solid #00C4AD;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      cursor: grab;
      z-index: 10;
      box-shadow: 0 1px 4px rgba(0,0,0,0.16);
      transition: box-shadow 0.15s ease, transform 0.12s ease;
    }

    .xrange-slider-handle:hover { box-shadow: 0 2px 7px rgba(0,0,0,0.24); }
    .xrange-slider-handle:active {
      cursor: grabbing;
      transform: translate(-50%, -50%) scale(1.12);
    }

    /* [27_28] 시세 추이 전용 — 기간바를 차트 x축 바로 아래에 폭까지 맞춰 붙인다.
       날짜 배지는 숨기고 '기간' 라벨만 좌측 y축 눈금 자리에 겹쳐 둬서 세로 공간을 쓰지 않는다 */
    .xrange-axis-aligned { position: relative; margin-top: 0; padding: 0 0 2px 0; }
    .xrange-axis-aligned .xrange-label-row {
      position: absolute; left: 0; top: 0; height: 20px; margin: 0; z-index: 1;
    }
    .xrange-axis-aligned .xrange-range-text { display: none; }
    /* [27_30] 시세추이: 프리셋 줄을 x축 아래 폭에 맞춰 양끝 배치 (프리셋 좌 · 층 분포 우) */
    .xrange-axis-aligned .xrange-preset-row { justify-content: space-between; }

    /* [27_30] 프리셋 줄: 좌측 프리셋 그룹 + 우측 '층 분포' 토글 (기본은 우측 정렬 유지) */
    .xrange-preset-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      justify-content: flex-end;
    }
    .xrange-presets {
      display: flex;
      gap: 6px;
    }

    .xrange-presetBtn {
      height: 26px;
      padding: 0 10px;
      border-radius: 13px;
      border: 1px solid rgba(0,0,0,0.12);
      background: #fff;
      color: #333;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    .xrange-presetBtn:hover {
      background: #f5f5f5;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .xrange-presetBtn.active {
      background: rgb(0,255,204);
      border-color: rgba(0,0,0,0.08);
      color: #000;
    }

    /* ===== [27_25] 시세 차트 우측 층 분포 패널 ===== */
    .dap-summary-chart-row { display: flex; align-items: stretch; gap: 4px; }
    .dap-summary-chart-wrap { flex: 1 1 auto; min-width: 0; }
    .dap-summary-floor-slot {
      flex: 0 0 72px; width: 72px; position: relative;   /* [27_26] 108→82px · [27_28] 82→72px (시세 차트 폭 확보) */
      overflow: hidden;               /* [27_26] 캔버스 초기 기본 크기(300px)가 잠깐 삐져나오는 것 차단 */
      padding: 8px 0;                 /* 차트 랩과 동일 — 캔버스 좌표계 정렬 */
    }
    /* [27_26] right 지정 금지 — 폭은 JS가 style.width로 명시(절대배치 replaced 요소는 width:auto면
       비트맵 크기가 곧 화면 폭이라, 폭을 안 박으면 redraw마다 dpr배로 불어난다) */
    .dap-floor-canvas {
      position: absolute; left: 0; top: 8px; display: block;
    }
    .dap-floor-track { position: absolute; right: 0; width: 20px; }
    .dap-floor-track-line {
      position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
      transform: translateX(-50%); background: #e6ebe9; border-radius: 1px;
    }
    .dap-floor-sel {
      position: absolute; left: 50%; width: 3px; transform: translateX(-50%);
      background: #00E5CC; border-radius: 2px;
    }
    .dap-floor-handle {
      position: absolute; left: 50%; width: 13px; height: 13px;
      transform: translate(-50%, -50%);
      background: #fff; border: 2px solid #00C4AD; border-radius: 50%;
      box-shadow: 0 1px 4px rgba(0,0,0,0.16);
      cursor: grab; touch-action: none; z-index: 2;
    }
    .dap-floor-handle:active { cursor: grabbing; box-shadow: 0 2px 7px rgba(0,0,0,0.24); }
    .dap-floor-reset {
      position: absolute; right: 20px; top: 0; z-index: 3;
      font-size: 9px; font-weight: 700; color: #4b5563; background: #fff;
      border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; padding: 1px 6px; cursor: pointer;
    }
    .dap-floor-reset:active { background: #f1f5f4; }

    /* ===== [커스텀 스크롤바] ===== */
    .tp-list-area::-webkit-scrollbar,
    .dap-container::-webkit-scrollbar {
      width: 5px;
    }
    .tp-list-area::-webkit-scrollbar-track,
    .dap-container::-webkit-scrollbar-track {
      background: transparent;
    }
    .tp-list-area::-webkit-scrollbar-thumb,
    .dap-container::-webkit-scrollbar-thumb {
      background: rgba(0,0,0,0.12);
      border-radius: 100px;
    }
    .tp-list-area::-webkit-scrollbar-thumb:hover,
    .dap-container::-webkit-scrollbar-thumb:hover {
      background: rgba(0,0,0,0.22);
    }
    /* ═══════════════════════════════════════════════════════════════
       [index_27_1] 대장(구/동) 기능
       - 버튼: 우측 '거래량' 아래 '대장' → 좌측으로 구대장/동대장(+평형) 전개
       - 지도: 왕관(현재 대장)/은왕관(과거 대장)/베지어 계보선/계보 팝업
       - 애니메이션 없음(정적 오버레이) → 전역 rAF 시계 불필요
       ═══════════════════════════════════════════════════════════════ */
    .daejangWrap { position: relative; }

    /* 대장 버튼 좌측으로 펼쳐지는 구대장/동대장 (+ 그 아래 평형 토글) */
    #daejangScopeList {
      position: absolute;
      right: calc(100% + 8px);
      top: 0;
      display: none;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      z-index: 2001;
    }
    #daejangScopeList.open { display: flex; }

    /* [27_2→27_3] 한 행 = [59/84 세로 스택] + [스코프 버튼].
       평형 스택은 '그 스코프가 켜졌을 때만' 펼쳐진다 — 대장→구/동대장 전개와 같은 계층. */
    .dj-scope-row {
      position: relative;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      min-height: 34px;
    }
    .dj-size-col {
      position: absolute;
      right: calc(100% + 8px);
      top: 0;
      display: none;
      flex-direction: column;
      gap: 8px;
    }
    .dj-scope-row.on .dj-size-col { display: flex; }

    .daejangScopeBtn {
      width: 84px;
      height: 34px;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,0.15);
      background: #fff;
      color: #111;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      outline: none;
      box-shadow: 0 2px 10px rgba(0,0,0,0.10);
      transition: box-shadow 0.2s ease, transform 0.2s ease;
      white-space: nowrap;
    }
    .daejangScopeBtn:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.18); transform: translateY(-1px); }
    .daejangScopeBtn.selected { background: rgb(0,255,204); border-color: rgba(0,0,0,0.08); color: #000; }

    .daejangSizeBtn {
      width: 84px;
      height: 34px;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,0.15);
      background: #fff;
      color: #111;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      outline: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.10);
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .daejangSizeBtn:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.16); transform: translateY(-1px); }
    /* [27_3] 선택 색을 스코프 버튼과 같은 민트로 통일 */
    .daejangSizeBtn.selected { background: rgb(0,255,204); border-color: rgba(0,0,0,0.08); color: #000; }

    /* 집계 로딩 카드 (월별 파일 fetch 진행률) */
    #daejangLoading {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 3000;
      display: none;
      background: rgba(255,255,255,0.97);
      border: 1px solid #e4e9ef;
      border-radius: 14px;
      padding: 16px 20px;
      box-shadow: 0 8px 28px rgba(23,34,46,0.18);
      font-size: 13px;
      font-weight: 700;
      color: #17222e;
      font-family: 'Pretendard Variable','Pretendard',system-ui,-apple-system,sans-serif;
      white-space: nowrap;
    }
    #daejangLoading.show { display: block; }
    #daejangLoading .dj-load-sub {
      margin-top: 5px;
      font-size: 11px;
      font-weight: 600;
      color: #5b6b7c;
    }
    #daejangLoading .dj-load-bar {
      margin-top: 8px;
      width: 190px;
      height: 6px;
      border-radius: 3px;
      background: #eef2f6;
      overflow: hidden;
    }
    #daejangLoading .dj-load-fill {
      height: 100%;
      width: 0%;
      border-radius: 3px;
      background: linear-gradient(90deg, #00E5CC, #00b39f);
      transition: width 0.2s ease;
    }

    /* ── 지도 위 왕관/은왕관 정류장 ──
       [27_4] 구조 원칙: CustomOverlay의 content는 '기본 라벨(.aptLabel) 단일 div' 하나뿐이다.
       왕관은 라벨 윗변 위로, 연도 칩은 아랫변 아래로 position:absolute 로 띄운다.
       → content의 레이아웃 크기가 라벨 텍스트만으로 결정되므로 xAnchor/yAnchor 계산이 흔들리지 않는다.
         (기존 크레인 .crane / 분양 배지 / 젤리가 쓰는 검증된 패턴. transform:scale은 앵커를 어긋나게 하므로 금지) */
    .dj-label {
      cursor: pointer;
      /* [27_9→사용자] 동별 색 테두리 — 실제 색은 makeStop이 인라인(border-color)으로 지정.
         두께·스타일만 여기서 고정해 기본 .aptLabel의 옅은 테두리를 확실히 덮는다. (사용자 1px 확정) */
      border-width: 1px;
      border-style: solid;
      /* [27_10] 1em을 px로 상속 → rim 링·순회 왕관이 줌별 폰트 크기에 비례 스케일 */
      --u: 1em;
    }
    /* 선택 강조는 외곽 링(box-shadow)이라 테두리 색과 겹치지 않고 함께 보인다 */
    /* [27_15] 클릭 시 금색 링 제거 — 이름창 색 테두리와 겹쳐 지저분해 보였음.
       선택 피드백은 팝업이 뜨는 것으로 충분. 은은한 그림자만 남긴다. */
    .dj-label.dj-sel {
      box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    }

    /* [27_10] 지역명 배지 — 이름창 우상단. new(.new-badge 좌상단)/분양(.bunyang-badge 우상단)과 동형.
       분양 배지도 우상단(right:-4px)을 쓰지만 대장 모드에선 대장이 라벨을 직접 만들어 분양 배지가 없으므로 충돌 없음.
       색은 그 구/동 계보선 색(makeStop이 인라인 지정). pointer-events:none으로 클릭/앵커 무영향. */
    .dj-region-badge {
      position: absolute;
      top: -13px;
      right: 0px;
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      pointer-events: none;
      letter-spacing: -0.02em;
      white-space: nowrap;
      text-shadow:
        0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;   /* 지도 배경에서도 읽히도록 흰 halo */
    }

    /* ══════════════════════════════════════════════════════════════
       [27_10] 순회 왕관 — 라벨 테두리(border-box)를 왕관이 도는 rim.
       데모 daejang_rim_demo.html의 ②왕관순회+④트윈을 일반화(왕관 N개 등간격).
       @property로 1em을 px 고정 상속(--u) → 줌별 폰트 변화에 링·왕관이 비례 스케일.
       구동은 JS 전역 시계(daejangCrownEpoch)+rAF가 각 왕관 offset-distance를 직접 갱신(아래 JS).
       ══════════════════════════════════════════════════════════════ */
    @property --u { syntax: '<length>'; initial-value: 0px; inherits: true; }

    /* [27_11] 왕관 경로 배경(.dj-rim)은 이름창 색 테두리와 겹쳐 이중선처럼 보여 제거.
       .dj-run은 offset-path:border-box(라벨 테두리 박스)를 따라가므로 rim 없이도 경로 동일. */
    /* 테두리를 도는 왕관 — offset-path:border-box, 항상 똑바로(offset-rotate:0deg) */
    .dj-run {
      position: absolute;
      width: calc(var(--u) * 1.20);
      height: auto;
      pointer-events: none;
      z-index: 3;
      offset-path: border-box;
      offset-rotate: 0deg;
      /* offset-distance는 JS(rAF)가 매 프레임 인라인으로 직접 설정 → CSS 애니메이션 없음 */
      filter: drop-shadow(0 0 calc(var(--u) * 0.12) var(--dj-crown-c, #e8a317));
    }
    /* 왕관 SVG 채색 — 흰 외곽선(halo) + 계보선 색 면 → 어느 배경에서도 읽힘 */
    .dj-cr .cb {
      fill: var(--dj-crown-c, #e8a317); stroke: #fff; stroke-width: 2.4;
      stroke-linejoin: round; paint-order: stroke;
    }
    .dj-cr .cs { fill: #fff; opacity: 0.22; }
    /* 작게 표시되므로 잔디테일(밴드/보석)은 생략 */

    /* 원경(dj-far): 순회 왕관 숨김 → 라벨만 (앵커·성능 안정) */
    body.dj-far .dj-run { display: none; }

    /* [27_3→27_4] 대장이던 연도 = 개별 칩. 라벨 아랫변 아래에 absolute로 한 줄 배치.
       테두리 색 = 그 구/동의 계보선 색(선↔정류장 매칭), 현재 대장 칩만 가격 티어색으로 채움. */
    .dj-chips {
      position: absolute;
      top: calc(100% + 3px);         /* 라벨 아랫변 아래 */
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 3px;
      white-space: nowrap;           /* 줄바꿈 없음 → 높이 고정 */
      pointer-events: auto;          /* [27_5] 칩 클릭도 라벨 핸들러로 버블링 */
      cursor: pointer;
      z-index: 2;
    }
    .dj-chip {
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      color: #17222e;
      background: rgba(255,255,255,0.96);
      border: 1.5px solid #cdd7e0;
      border-radius: 50%;
      padding: 0;
      white-space: nowrap;
      box-shadow: 0 1px 2px rgba(0,0,0,0.14);
      line-height: 1;
    }
    .dj-chip.now { color: #fff; }

    /* 지도 레벨 1~4에서만 연도 표시. 레벨 5 이상은 연도 칩 숨김. */
    body.dj-hide-years .dj-chips { display: none; }

    /* 원경(level ≥ DAEJANG_FAR_LEVEL): 과거 대장·연도 칩 숨김 → 현재 왕관+라벨만 */
    body.dj-far .dj-chips { display: none; }

    /* ── 계보 팝업 (위 → 아래 시간순) ── */
    /* [27_13] 팝업 래퍼 — 왕관 위까지 띄우는 116px 여백을 이 래퍼가 갖되, 래퍼는 이벤트를 통과시킨다.
       → 팝업 바로 아래 빈 공간에서의 드래그가 지도로 전달됨(화면 이동 정상). */
    .dj-popup-wrap {
      pointer-events: none;         /* 여백 영역은 이벤트 통과 → 지도 드래그 허용 */
      padding-bottom: 116px;        /* 좌표 위로 띄우는 높이(구 margin-bottom 대체) */
      /* [27_16] 래퍼 폭 = 팝업 폭(300px)으로 고정 → xAnchor:0.5와 정확히 정렬되고,
         clickable:false 덕에 이 여백(좌우/아래)은 지도로 이벤트가 통과된다. */
      width: 300px;
    }
    .dj-popup {
      width: 300px;   /* [27_16] 긴 단지명 수용 위해 소폭 확대 (구 268) */
      background: #fff;
      border: 1px solid #e4e9ef;
      border-radius: 13px;
      box-shadow: 0 8px 26px rgba(23,34,46,0.26);
      padding: 11px 12px 12px;
      position: relative;
      pointer-events: auto;         /* [27_13] 흰 박스 위에서는 정상적으로 클릭/스크롤 동작 */
      font-family: 'Pretendard Variable','Pretendard',system-ui,-apple-system,sans-serif;
      color: #17222e;
      cursor: default;
    }
    .dj-popup::after {
      content: '';
      position: absolute;
      left: 50%; bottom: -8px;
      transform: translateX(-50%);
      border: 8px solid transparent;
      border-top-color: #fff;
      border-bottom: 0;
      filter: drop-shadow(0 2px 1px rgba(0,0,0,0.10));
    }
    .dj-popup .dj-x {
      position: absolute;
      top: 6px; right: 7px;
      width: 22px; height: 22px;
      border: 0; border-radius: 6px;
      background: transparent;
      color: #5b6b7c;
      font-size: 13px;
      cursor: pointer;
      line-height: 1;
    }
    .dj-popup .dj-x:hover { background: #eef2f6; }
    .dj-popup .dj-head {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: -0.01em;
      padding-right: 22px;
    }
    .dj-popup .dj-head small {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      font-weight: 700;
      color: #5b6b7c;
    }
    .dj-popup .dj-rows {
      margin-top: 8px;
      border-top: 1px solid #e4e9ef;
      padding-top: 7px;
      display: grid;
      gap: 3px;
      overflow-x: hidden;   /* [27_16] 긴 단지명으로 인한 가로 스크롤 제거 */
      max-height: 208px;
      overflow-y: auto;
    }
    .dj-popup .dj-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      border-radius: 8px;
      padding: 4px 6px;
    }
    .dj-popup .dj-row.now { background: #f5f8fa; }
    .dj-popup .dj-no {
      flex: none;
      width: 30px;
      font-size: 9.5px;
      font-weight: 800;
      color: #fff;
      background: #8496a8;
      border-radius: 999px;
      padding: 1.5px 0;
      text-align: center;
    }
    .dj-popup .dj-row.now .dj-no { background: #17222e; }
    .dj-popup .dj-yr {
      flex: none;
      width: 62px;
      color: #5b6b7c;
      font-variant-numeric: tabular-nums;
    }
    .dj-popup .dj-nm2 {
      flex: 1;
      min-width: 0;   /* [27_16] flex 아이템 기본 min-width:auto 해제 → 콘텐츠보다 줄어들어 ellipsis 작동 */
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dj-popup .dj-am {
      flex: none;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }
    .dj-popup .dj-noloc { color: #9aa3ad; font-weight: 600; font-size: 9.5px; }
    .dj-popup .dj-detail {
      margin-top: 9px;
      width: 100%;
      height: 32px;
      border: 1px solid #17222e;
      border-radius: 9px;
      background: #17222e;
      color: #fff;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }
    .dj-popup .dj-detail:hover { background: #253546; }

    @media (max-width: 768px) {
      .dj-popup { width: 244px; }
      #daejangLoading { font-size: 12px; padding: 14px 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .daejangScopeBtn, .daejangSizeBtn { transition: none; }
    }

    /* =========================================================
       [30_3] 동별 가격 비교 — 면적 탭 (단일 선택)
       살구톤(.bunyang-floor-tab과 동일 색값). 동별 섹션 헤더가 이미 c2라 톤이 맞는다.
       시세 추이의 .dap-summary-area-btn은 다중선택 전용(비선택 취소선 +
       --summary-column-count/--summary-button-width 전제)이라 재사용하지 않는다.
       ========================================================= */
    .dap-dong-tabs {
      margin: 0 0 12px;
      padding: 2px 0 4px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;               /* 평소 숨김 — 드래그 중에만 노출(bindScrollbarAutoHide) */
    }
    .dap-dong-tabs::-webkit-scrollbar { display: none; }
    .dap-dong-tabs.scrolling { scrollbar-width: thin; }
    .dap-dong-tabs.scrolling::-webkit-scrollbar { display: block; height: 5px; }
    .dap-dong-tabs.scrolling::-webkit-scrollbar-thumb { background: rgba(76,84,80,0.55); border-radius: 999px; }

    .dap-dong-tab-row {
      width: max-content;
      min-width: 100%;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .dap-dong-tab {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 16px;
      border: 1px solid rgba(136,135,128,0.22);
      background: #fff;
      color: #2C2C2A;
      font-family: inherit;
      font-size: 11.5px;
      letter-spacing: -0.02em;
      line-height: 1.2;
      white-space: nowrap;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(36,32,24,0.04);
      transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
      user-select: none;
    }
    .dap-dong-tab:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(36,32,24,0.08); }
    .dap-dong-tab .cnt { font-size: 10px; color: #888; font-weight: 600; }
    .dap-dong-tab.active {
      background: #fff4ec;
      border-color: #f2b17d;
      color: #c2410c;
      font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(251,146,60,0.10);
    }
    .dap-dong-tab.active .cnt { color: #d97706; }

    /* [30_4] DONG_CARD_ORDER='chart-first' 전용 간격 — 표가 기간 슬라이더에 붙는 것 방지.
       인접 형제 선택자라 'table-first'(표가 먼저)에서는 매칭되지 않는다. */
    .dap-card .xrange-block + .dap-table-wrap { margin-top: 18px; }
    /* ══════════════════════════════════════════════════════════════
       [30_5] 거래량 패널 v0.8 — 목업 tx_panel_mockup_v0_8 이식분
       전부 body.tx-v08 으로 스코프. TX_PANEL_UI='legacy'로 되돌리면
       이 클래스가 안 붙어 아래 규칙이 통째로 죽고 기존 화면이 그대로 복구된다.
       살구색은 리터럴(#c2410c / #fed7aa)로 쓴다. --c2-apricot-* 는 :root 가 아니라
       .dap-section-header 스코프 안에만 선언돼 있어 이 패널에서는 상속되지 않는다.
       (var 가 해석되지 않으면 background 선언이 통째로 무효가 되고 .txchip.on 의
        color:#fff 만 남아 '흰 글씨 + 흰 배경'이 된다 — 실제로 분양 칩이 그렇게 사라졌었다)
       ══════════════════════════════════════════════════════════════ */

    /* 기존 컨트롤 패널(지역 스위치 + 헤더 + 슬라이더)은 칩/팝오버로 대체 → 숨김.
       DOM은 남겨 두고 display만 끈다(슬라이더 노드는 기간 팝오버로 이동해 재사용). */
    body.tx-v08 .transactionPanel > .control-panel { display: none; }
    body.tx-v08 .transactionPanel .status-bar { display: none; }

    /* ── 칩 줄 : 시 · 군구 · 매매 · 분양 ·······(우측) 기간 ── */
    body.tx-v08 .txchip-row {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 9px 12px 10px;
        background: #fff;
        border-bottom: 1px solid var(--gray-100);
        overflow-x: auto;
        scrollbar-width: none;
    }
    body.tx-v08 .txchip-row::-webkit-scrollbar { display: none; }
    /* 요청: 기간 칩만 우측 끝으로 */
    body.tx-v08 .txchip[data-txpop="period"] { margin-left: auto; }

    body.tx-v08 .txchip {
        flex: 0 0 auto;
        height: 32px;
        padding: 0 11px;
        border-radius: 16px;
        border: 1px solid var(--gray-200);
        background: #fff;
        font-size: 12px;
        font-weight: 700;
        color: var(--gray-600);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        transition: background .15s, color .15s, border-color .15s;
    }
    body.tx-v08 .txchip.has-caret::after {
        content: '';
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid var(--gray-400);
    }
    body.tx-v08 .txchip.on {
        background: var(--mint-deep);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 2px 10px rgba(0,200,160,.30);
    }
    body.tx-v08 .txchip.on.has-caret::after { border-top-color: rgba(255,255,255,.85); }
    body.tx-v08 .txchip.open { border-color: var(--mint-deep); }
    /* 매매/분양은 캐럿 없는 단독 토글 — 둘 중 최소 하나는 항상 켜져 있다.
       시·군구·매매·기간은 .txchip.on 의 민트(var(--mint-deep))를 그대로 쓰고,
       분양만 팔레트 살구색(--c2-apricot #fb923c)으로 구분한다.
       (이전엔 매매가 #00a884 라 시 칩과 미묘하게 달랐고, 분양은 #c2410c 라 적색으로 보였다) */
    body.tx-v08 .txchip[data-txtoggle="silv"].on { background: #9900FF; box-shadow: 0 2px 10px rgba(153,0,255,.32); }

    /* 차트가 무엇인지 알려주는 한 줄 */
    body.tx-v08 .txchip-legend {
        flex: 0 0 auto;
        padding: 0 13px 9px;
        background: #fff;
        border-bottom: 1px solid var(--gray-100);
        font-size: 10px;
        font-weight: 600;
        color: var(--gray-400);
        letter-spacing: -.01em;
    }

    /* ── 기간 팝오버 (기존 .cp-head / .cp-slider-wrap 노드를 그대로 옮겨 담는다) ── */
    body.tx-v08 .txchip-scrim { position: absolute; inset: 0; z-index: 1560; display: none; }
    body.tx-v08 .txchip-scrim.open { display: block; }
    body.tx-v08 .txchip-pop {
        position: absolute;
        left: 12px; right: 12px;
        z-index: 1570;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 10px 34px rgba(0,0,0,.24);
        padding: 14px;
        display: none;
        max-height: 60%;
        overflow-y: auto;
    }
    body.tx-v08 .txchip-pop.open { display: block; }
    body.tx-v08 .txchip-pop h4 {
        margin: 0 0 9px;
        font-size: 11px; font-weight: 800;
        color: var(--gray-400); letter-spacing: .14em;
    }
    body.tx-v08 .txchip-pop h4:not(:first-child) { margin-top: 16px; }
    body.tx-v08 .txpop-opts { display: flex; flex-wrap: wrap; gap: 6px; }
    body.tx-v08 .txpop-opt {
        border: 1px solid var(--gray-200);
        background: #fff;
        border-radius: 9px;
        padding: 9px 13px;
        font-size: 12.5px; font-weight: 700;
        color: var(--gray-600);
        cursor: pointer;
    }
    body.tx-v08 .txpop-opt.on {
        border-color: var(--mint-deep);
        background: rgba(0,200,160,.09);
        color: #046a58;
    }
    /* 팝오버 안으로 옮겨진 기존 노드의 여백 보정 (원본 규칙은 손대지 않는다) */
    body.tx-v08 .txchip-pop .cp-head { margin-bottom: 12px; }
    body.tx-v08 .txchip-pop .cp-slider-wrap { margin: 0; }

    /* ── 리스트 헤더 : 건수 + 정렬 ── */
    body.tx-v08 .tx-listhead {
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px; padding: 9px 4px 8px;
        position: sticky; top: 0; z-index: 3;
        background: linear-gradient(#f5f5f5 74%, rgba(245,245,245,0));
    }
    body.tx-v08 .tx-listhead .lh-cnt { font-size: 11.5px; font-weight: 700; color: var(--gray-600); }
    body.tx-v08 .tx-listhead .lh-cnt b { color: var(--ink); font-size: 13px; font-weight: 800; }
    body.tx-v08 .tx-listhead .lh-sub { color: var(--gray-400); font-weight: 600; }
    body.tx-v08 .lh-cx {
        display: inline-block; font-size: 10px; font-weight: 800;
        color: #c02a2e; background: rgba(229,72,77,.13);
        padding: 2px 7px; border-radius: 5px; margin-right: 6px; vertical-align: 1px;
    }
    body.tx-v08 .tx-listhead .lh-sort { display: flex; gap: 1px; flex: 0 0 auto; }
    body.tx-v08 .tx-listhead .lh-sort button {
        border: none; background: none; cursor: pointer;
        font-size: 11px; font-weight: 600; color: var(--gray-400);
        padding: 4px 8px; border-radius: 6px;
    }
    body.tx-v08 .tx-listhead .lh-sort button.on {
        color: #046a58; background: rgba(0,200,160,.12); font-weight: 800;
    }

    /* ── 리스트 컨테이너 ── */
    body.tx-v08 #list-container {
        display: flex; flex-direction: column; gap: 8px;
        list-style: none; margin: 0; padding: 0;
    }
    body.tx-v08 #list-container .loading-msg {
        text-align: center; padding: 44px 20px;
        color: var(--gray-400); font-size: 12.5px; line-height: 1.7;
    }

    /* ── 카드 = 거래 1건. 좌 : 이름·가격 / 우 : 미니 차트 ── */
    body.tx-v08 li.txc-card {
        display: flex; align-items: stretch; gap: 12px;
        background: #fff; border-radius: 12px;
        box-shadow: 0 1px 5px rgba(0,0,0,.07);
        padding: 12px 13px;
        cursor: pointer;
        border-bottom: none;
    }
    body.tx-v08 li.txc-card:active { background: rgba(0,200,160,.08); }
    body.tx-v08 .txc-left  { flex: 1 1 auto; min-width: 0; }
    body.tx-v08 .txc-right { flex: 0 0 118px; display: flex; flex-direction: column; justify-content: center; }

    body.tx-v08 .txc-name {
        font-size: 14px; font-weight: 800; letter-spacing: -.028em;
        line-height: 1.3; word-break: keep-all; color: var(--ink);
    }
    body.tx-v08 .txc-tag {
        display: inline-block; font-size: 10px; font-weight: 800;
        padding: 1.5px 5px; border-radius: 4px;
        vertical-align: 2px; margin-left: 5px; white-space: nowrap;
    }
    /* 배지 글자는 전부 흰색 → 배경은 옅은 틴트가 아니라 팔레트 원색(솔리드)으로.
       틴트+진한 글자를 섞으면 직거래만 유독 진해 보이는 불일치가 생긴다. */
    body.tx-v08 .txc-tag.apt  { background: var(--mint-deep); color: #fff; }
    /* 분양권 = 지도 .bunyang-badge 와 같은 보라(#9900FF) / 입주권 = 팔레트 살구(--c2-apricot)
       silv_YYYY_MM.json 의 ownershipGbn 이 '입…'이면 입주권으로 갈라 칠한다. */
    body.tx-v08 .txc-tag.silv { background: #9900FF; color: #fff; }   /* 분양권 = 지도 분양 배지와 동일 */
    body.tx-v08 .txc-tag.ipju { background: #fb923c; color: #fff; }   /* 입주권 = 팔레트 살구 */
    body.tx-v08 .txc-tag.cx   { background: rgba(229,72,77,.13); color: #c02a2e; }
    body.tx-v08 .txc-new {
        display: inline-block; font-size: 9.5px; font-weight: 800;
        color: #fff; background: #e5484d;
        padding: 1.5px 5px; border-radius: 4px; vertical-align: 2px; margin-left: 4px;
    }
    body.tx-v08 .txc-sub {
        font-size: 11.5px; color: var(--gray-400); font-weight: 500;
        margin-top: 3px; line-height: 1.45; word-break: keep-all;
    }
    body.tx-v08 .txc-sub .sep { opacity: .5; margin: 0 4px; }
    body.tx-v08 .txc-sub .nw  { white-space: nowrap; }

    body.tx-v08 .txc-amt {
        font-size: 17px; font-weight: 800; letter-spacing: -.045em;
        font-variant-numeric: tabular-nums; margin-top: 7px; color: var(--ink);
    }
    body.tx-v08 li.txc-card.cx .txc-amt {
        color: var(--gray-400);
        text-decoration: line-through;
        text-decoration-thickness: 2px;
    }
    body.tx-v08 .txc-deal {
        display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px;
        margin-top: 3px; font-size: 11.5px; font-weight: 600;
        color: var(--gray-600); font-variant-numeric: tabular-nums;
    }
    body.tx-v08 .txc-deal .sep { color: var(--gray-400); opacity: .6; }
    body.tx-v08 .txc-gbn {
        display: inline-block; font-size: 9.5px; font-weight: 800;
        padding: 1.5px 5px; border-radius: 4px; margin-left: 2px;
    }
    body.tx-v08 .txc-gbn.jung { background: var(--gray-100); color: var(--gray-600); }
    body.tx-v08 .txc-gbn.jik  { background: #FF99CC; color: #fff; }   /* 팔레트 핑크 */

    body.tx-v08 .txc-spark svg { display: block; width: 100%; height: 58px; }
    body.tx-v08 .txc-spark-empty {
        height: 58px; display: flex; align-items: center; justify-content: center;
        text-align: center; font-size: 10px; color: var(--gray-400);
        background: var(--gray-50); border-radius: 8px; line-height: 1.4;
    }
    body.tx-v08 .txc-sparkfoot {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 5px; margin-top: 4px;
    }
    body.tx-v08 .txc-ar {
        font-size: 9.5px; font-weight: 700; letter-spacing: -.02em;
        white-space: nowrap; color: var(--gray-600);
    }
    body.tx-v08 .txc-pct { font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
    body.tx-v08 .txc-pct.up { color: #e5484d; }
    body.tx-v08 .txc-pct.dn { color: #2563eb; }
    body.tx-v08 .txc-pct.fl { color: var(--gray-400); }

    /* ── 모바일 : 상단 끝까지 + 라운드 제거 + 그래버 드래그 ── */
    body.tx-v08 .txsheet-grab { display: none; }
    @media (max-width: 768px) {
        body.tx-v08 .transactionPanel {
            max-height: none;
            height: var(--tx-sheet-h, 75%);
            bottom: 0;
            border-top-left-radius: 0;      /* 요청 1 : 라운드 제거 */
            border-top-right-radius: 0;
            /* 여닫는 슬라이드를 bottom 이 아니라 transform 으로 한다.
               bottom 은 레이아웃 속성이라 메인 스레드에서 애니메이션되는데, 열자마자
               카드 수백 장을 렌더하면 그 사이 프레임이 통째로 빠져 '아래에서 생겼다가
               위로 튀는' 2단 동작이 된다(실측: .open 후 219ms 동안 프레임 0).
               transform 은 컴포지터가 처리해 메인 스레드가 막혀도 이어진다.
               bottom 은 기존 .minimized(-100vh) 를 위해 트랜지션 목록에 남겨 둔다. */
            transform: translateY(0);
            transition: transform .3s ease, bottom .3s ease, height .28s cubic-bezier(.22,.61,.36,1);
            will-change: transform;
        }
        body.tx-v08 .transactionPanel.tx-dragging { transition: none; }
        /* 닫힌 상태는 자기 높이만큼 아래로. 높이가 몇 %든(50/75/100) 항상 정확히 화면 밖이다. */
        body.tx-v08 .transactionPanel:not(.open) { transform: translateY(100%); }
        body.tx-v08 .txsheet-grab {
            display: block; position: relative;
            flex: 0 0 auto; height: 18px;
            background: #fff; cursor: grab; touch-action: none;
        }
        body.tx-v08 .txsheet-grab::before {
            content: ''; position: absolute; top: 7px; left: 50%;
            width: 38px; height: 4px; margin-left: -19px;
            border-radius: 2px; background: var(--gray-200);
            transition: background .18s;
        }
        body.tx-v08 .txsheet-grab:active::before { background: var(--mint-deep); }
        body.tx-v08 .txchip-pop { max-height: 52%; }
        /* 시트를 75%까지 올리면 지도 위 필터 버튼 스택(#sideFilters / #rightFilters, z-index 2000)이
           칩 줄(패널 z-index 1500)을 덮어 탭이 먹지 않는다. 열린 시트를 그 위로 올린다.
           데스크톱은 패널이 우측 400px 칼럼이고 #rightFilters가 right:410px로 비켜서므로 그대로 둔다. */
        body.tx-v08 .transactionPanel.open { z-index: 2100; }
    }
    /* ===== [30_7] 우측 하단 지도 액션 버튼 (아파트 검색 · 내 위치) =====
       좌하단 #miniTrendToggle(left:12px/bottom:40px)과 대칭 위치. z-index는 안내 배너(2000)보다 위,
       상세/거래량 패널(2100)보다 아래 — 패널이 열리면 자연스럽게 가려진다. */
    #mapFabs {
      position: fixed;
      right: 12px;
      bottom: 40px;
      z-index: 2050;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: right 0.3s ease, bottom 0.2s ease;
    }
    .mapfab {
      position: relative;
      width: 46px;
      height: 46px;
      padding: 0;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.15);
      background: #fff;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0,0,0,0.14);
      transition: box-shadow .2s ease, transform .12s ease, color .2s ease, border-color .2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .mapfab:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
    .mapfab:active { transform: scale(0.94); }
    .mapfab svg { display: block; }
    /* 위치 확인 중: 아이콘을 감추고 링 스피너 */
    .mapfab.loading svg { opacity: 0; }
    .mapfab.loading::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      width: 20px; height: 20px;
      margin: -10px 0 0 -10px;
      border-radius: 50%;
      border: 2.5px solid var(--gray-200);
      border-top-color: var(--mint-deep);
      animation: mapfabSpin .7s linear infinite;
    }
    @keyframes mapfabSpin { to { transform: rotate(360deg); } }
    /* 내 위치 확보됨 */
    .mapfab.located { color: var(--mint-deep); border-color: rgba(0,200,160,0.55); }

    /* 데스크톱에서 거래량 패널(우측 400px)이 열리면 비켜선다.
       #rightFilters가 JS로 right:410px가 되는 것과 같은 규약을, 형제 선택자로 CSS만 써서 구현
       (#mapFabs는 .transactionPanel 뒤에 놓여 있어야 이 규칙이 성립한다). */
    @media (min-width: 769px) {
      .transactionPanel.open ~ #mapFabs { right: 410px; }
    }

    /* ── 현재 위치 마커: 0×0 래퍼라 CustomOverlay 앵커 원점이 곧 좌표 (metro-radar-wrap과 동일 패턴) ── */
    .gps-wrap { position: relative; width: 0; height: 0; pointer-events: none; }
    .gps-dot, .gps-ring {
      position: absolute;
      left: -9px; top: -9px;
      width: 18px; height: 18px;
      border-radius: 50%;
    }
    .gps-dot {
      background: var(--mint-deep);   /* [30_9] 파랑(#1a73e8) → 서비스 민트. .mapfab.located 색과 통일 */
      border: 2.5px solid #fff;
      box-sizing: border-box;
      box-shadow: 0 1px 6px rgba(0,0,0,0.35);
    }
    .gps-ring {
      /* [30_9] --mint-deep(rgb(0,200,160))의 35% — rgba()에 CSS 변수를 직접 넣을 수 없어 값으로 적는다 */
      background: rgba(0, 200, 160, 0.35);
      animation: gpsPulse 2s ease-out infinite;
    }
    @keyframes gpsPulse {
      0%   { transform: scale(1);   opacity: .55; }
      70%  { transform: scale(3.4); opacity: 0; }
      100% { transform: scale(3.4); opacity: 0; }
    }

    /* ===== [30_7] 아파트 검색 오버레이 =====
       입력창을 화면 상단에 두는 이유: 하단 고정이면 모바일 키보드가 올라올 때 입력창을 덮는다
       (iOS는 레이아웃 뷰포트가 줄지 않아 fixed 요소가 키보드 뒤로 들어감). */
    #aptSearch {
      position: fixed;
      inset: 0;
      z-index: 3200;
      display: none;
      background: rgba(15,20,25,0.28);
    }
    #aptSearch.open { display: block; }
    .as-box {
      position: absolute;
      top: calc(10px + env(safe-area-inset-top, 0px));
      left: 50%;
      transform: translateX(-50%);
      width: min(560px, calc(100vw - 24px));
      max-height: calc(100vh - 28px);
      max-height: calc(100dvh - 28px);   /* 키보드가 올라오면 목록이 그만큼 줄어든다 */
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 12px 36px rgba(15,20,25,0.28);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .as-bar {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 10px 10px 14px;
      border-bottom: 1px solid var(--gray-100);
    }
    .as-bar > svg { color: var(--gray-400); flex: 0 0 auto; }
    .as-input {
      flex: 1 1 auto;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      padding: 6px 0;
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
    }
    .as-input::placeholder { color: var(--gray-400); font-weight: 500; }
    .as-btn {
      flex: 0 0 auto;
      width: 30px; height: 30px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--gray-400);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }
    .as-btn:hover { background: var(--gray-100); color: var(--gray-700); }
    .as-list { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .as-row {
      display: block;
      width: 100%;
      text-align: left;
      border: 0;
      border-bottom: 1px solid var(--gray-50);
      background: transparent;
      padding: 11px 14px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .as-row:last-child { border-bottom: 0; }
    .as-row:hover, .as-row.on { background: var(--gray-50); }
    .as-nm { font-size: 14.5px; font-weight: 700; color: var(--ink); }
    .as-nm mark { background: rgba(0,200,160,0.24); color: inherit; border-radius: 3px; padding: 0 1px; }
    .as-tag {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 6px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      background: rgba(0,200,160,0.14);
      color: #067f68;
    }
    .as-sub { margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--gray-600); }
    .as-msg { padding: 24px 16px; text-align: center; font-size: 13px; font-weight: 600; color: var(--gray-400); }
    .as-more { padding: 10px 14px 14px; text-align: center; font-size: 12px; font-weight: 600; color: var(--gray-400); }

  </style>
</head>
<body>
  <script>
    /* [30_5] 거래량 패널 v0.8 클래스를 '첫 페인트 전'에 붙인다.
       init 끝(loadAptTrendData 96파일 뒤, 실측 약 1.2초)에서 붙이면
       height 는 즉시 645px 로 점프하는데 bottom 은 -430px→-645px 로 0.3초 트랜지션을 타서
       그 사이 패널이 화면 하단에 최대 215px 잠깐 보였다 사라진다.
       여기서 미리 붙이면 초기 상태가 곧 최종 상태라 '변화'가 없어 트랜지션이 발동하지 않는다.
       TX_PANEL_UI='legacy' 인 경우 initTxPanelV08() 이 이 클래스를 도로 떼어낸다. */
    document.body.classList.add('tx-v08');
  </script>
  <div id="map"></div>
  <!-- [index_20_5] 좌측 하단 미니 트렌드 표시 토글 -->
  <button id="miniTrendToggle" type="button" class="on" title="아파트 이름창 배경의 시세 추이 미니 차트 표시/숨김"><span class="mt-text">미니 차트</span><span class="mt-switch"><span class="mt-knob"></span></span></button>
  <div id="schoolPathOverlay"><svg xmlns="http://www.w3.org/2000/svg"></svg></div>

  <div class="dongAreaPanel" id="dongAreaPanel">
      <div class="dongAreaResizeHandle" id="dongAreaResizeHandle" title="패널 너비 조절"></div>
      <div class="dap-topbar">
          <div class="dap-topbar-inner">
              <div class="dap-header-row">
                  <div class="dap-title">
                      <h1 id="dapAptName">아파트 선택</h1>
                      <div class="sub" id="dapAptMeta">지도에 표시된 아파트를 클릭하세요.</div>
                  </div>
                  <button type="button" class="dap-closeBtn" id="btnCloseDongArea">닫기</button>
              </div>
              <!-- [index_24_1] 아파트 선택 드롭다운(.dap-selector) 제거 — 명단 API 은퇴, 지도 클릭이 유일한 진입 경로 -->
          </div>
      </div>
      <div class="dap-container">
          <div id="dapResult"><div class="dap-loading">지도에 표시된 아파트를 클릭하세요.</div></div>
      </div>
  </div>


  <div id="sideFilters">
    <button class="filterBtn" data-panel="brand"><span>브랜드</span><span class="arrow"><svg width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><polygon points="0,0 10,0 5,6" fill="currentColor"/></svg></span></button>
    <button class="filterBtn" data-panel="station"><span>역세권</span><span class="arrow"><svg width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><polygon points="0,0 10,0 5,6" fill="currentColor"/></svg></span></button>
    <button class="filterBtn" data-panel="big"><span>대단지</span><span class="arrow"><svg width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><polygon points="0,0 10,0 5,6" fill="currentColor"/></svg></span></button>
    <button class="filterBtn" data-panel="new"><span>신축</span><span class="arrow"><svg width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><polygon points="0,0 10,0 5,6" fill="currentColor"/></svg></span></button>
    <button class="filterBtn" data-panel="flat"><span>평지</span><span class="arrow"><svg width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><polygon points="0,0 10,0 5,6" fill="currentColor"/></svg></span></button>
    <button class="filterBtn" data-panel="school"><span>초등</span><span class="arrow"><svg width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><polygon points="0,0 10,0 5,6" fill="currentColor"/></svg></span></button>
  </div>

  <div id="brandList">
    <button class="brandBtn" data-brand="래미안">래미안</button>
    <button class="brandBtn" data-brand="힐스테이트">힐스테이트</button>
    <button class="brandBtn" data-brand="푸르지오">푸르지오</button>
    <button class="brandBtn" data-brand="자이">자이</button>
    <button class="brandBtn" data-brand="아이파크">아이파크</button>
    <button class="brandBtn" data-brand="위브">위브</button>
    <button class="brandBtn" data-brand="롯데캐슬">롯데캐슬</button>
    <button class="brandBtn" data-brand="더샵">더샵</button>
    <button class="brandBtn" data-brand="e편한세상">e-편한</button>
    <button class="brandBtn" data-brand="SKVIEW">SKVIEW</button>
    <button class="brandBtn" data-brand="그 외">그 외</button>
  </div>

  <div id="stationList">
    <button class="stationDistBtn" data-dist="all">전체</button>
    <button class="stationDistBtn" data-dist="500">500m</button>
    <button class="stationDistBtn" data-dist="400">400m</button>
    <button class="stationDistBtn" data-dist="300">300m</button>
    <button class="stationDistBtn" data-dist="200">200m</button>
    <button class="stationDistBtn" data-dist="100">100m</button>
  </div>

  <div id="schoolDistList">
    <button class="schoolDistBtn" data-dist="0">전체</button>
    <button class="schoolDistBtn" data-dist="500">500m</button>
    <button class="schoolDistBtn" data-dist="400">400m</button>
    <button class="schoolDistBtn" data-dist="300">300m</button>
    <button class="schoolDistBtn" data-dist="200">200m</button>
    <button class="schoolDistBtn" data-dist="100">100m</button>
  </div>

  <!-- [26_10] 대단지: 세대수(MySQL apt_master.sds) 임계값. data-sds="0" = 전체 -->
  <div id="bigList">
    <button class="bigSdsBtn" data-sds="0">전체</button>
    <button class="bigSdsBtn" data-sds="100">100세대~</button>
    <button class="bigSdsBtn" data-sds="300">300세대~</button>
    <button class="bigSdsBtn" data-sds="500">500세대~</button>
    <button class="bigSdsBtn" data-sds="1000">1000세대~</button>
  </div>

  <!-- [26_10] 신축: (올해−build_year) 최대 경과년수. data-age="0" = 전체 -->
  <div id="newList">
    <button class="newAgeBtn" data-age="0">전체</button>
    <button class="newAgeBtn" data-age="3">~3년</button>
    <button class="newAgeBtn" data-age="5">~5년</button>
    <button class="newAgeBtn" data-age="7">~7년</button>
    <button class="newAgeBtn" data-age="10">~10년</button>
    <button class="newAgeBtn" data-age="15">~15년</button>
    <button class="newAgeBtn" data-age="20">~20년</button>
  </div>

  <div id="rightFilters">
      <button class="filterBtn" id="btnTransaction"><span>거래량</span><span class="arrow"><svg width="6" height="10" viewBox="0 0 6 10" aria-hidden="true"><polygon points="6,0 6,10 0,5" fill="currentColor"/></svg></span></button>

      <!-- [27_1] 대장: 클릭 시 좌측으로 구대장/동대장(+평형 59·84) 전개 -->
      <div class="daejangWrap">
        <button class="filterBtn" id="btnDaejang"><span>대장</span><span class="arrow"><svg width="6" height="10" viewBox="0 0 6 10" aria-hidden="true"><polygon points="6,0 6,10 0,5" fill="currentColor"/></svg></span></button>
        <div id="daejangScopeList">
          <!-- [27_2] 평형(59/84)은 각 스코프 버튼의 좌측 세로 스택 — 클릭 1번에 (스코프+평형) 확정 -->
          <div class="dj-scope-row">
            <div class="dj-size-col">
              <button class="daejangSizeBtn" data-scope="gu" data-size="59">59㎡</button>
              <button class="daejangSizeBtn" data-scope="gu" data-size="84">84㎡</button>
            </div>
            <button class="daejangScopeBtn" data-scope="gu">구대장</button>
          </div>
          <div class="dj-scope-row">
            <div class="dj-size-col">
              <button class="daejangSizeBtn" data-scope="dong" data-size="59">59㎡</button>
              <button class="daejangSizeBtn" data-scope="dong" data-size="84">84㎡</button>
            </div>
            <button class="daejangScopeBtn" data-scope="dong">동대장</button>
          </div>
        </div>
      </div>
  </div>

  <!-- [27_1] 대장 집계 로딩(월별 거래 파일 fetch 진행률) -->
  <div id="daejangLoading">
    👑 대장 데이터 집계 중…
    <div class="dj-load-sub" id="djLoadSub">거래 파일 불러오는 중</div>
    <div class="dj-load-bar"><div class="dj-load-fill" id="djLoadPct"></div></div>
  </div>

  <div class="transactionPanel" id="transactionPanel">
      <!-- [30_5] 모바일 바텀시트 그래버 — 위로 끝까지 끌면 전체화면 -->
      <div class="txsheet-grab" id="txSheetGrab" aria-hidden="true"></div>
      <button type="button" class="tp-minimize-btn" id="tpMinimizeBtn"><svg width="12" height="7" viewBox="0 0 12 7" aria-hidden="true"><polygon points="0,0 12,0 6,7" fill="currentColor"/></svg></button>
      <div class="control-panel">
          <!-- [index_24] 지역 토글: 거래량 패널을 울산/부산으로 구분 (상세 패널 스위치와 동형) -->
          <div class="tx-region-row">
              <button type="button" class="tx-region-switch" id="txRegionSwitch" aria-label="지역 선택: 울산 또는 부산">
                  <span class="rs-label rs-left">울산</span>
                  <span class="rs-track"><span class="rs-knob"></span></span>
                  <span class="rs-label rs-right">부산</span>
              </button>
          </div>
          <!-- [v15] 시안 D '데이터 분석형' 마크업: 좌우 분할 헤더 + 슬라이더 박스 -->
          <div class="cp-head">
              <div class="cp-left">
                  <div class="cp-kicker">조회 기간</div>
                  <div class="date-display" id="date-display">기간 설정</div>
              </div>
              <div class="cp-right">
                  <div class="cp-num" id="result-count"></div>
                  <div class="cp-num-label">총 거래</div>
              </div>
          </div>
          <div class="cp-slider-wrap">
              <div class="slider-container" id="slider-container">
                  <div class="slider-track"></div>
                  <div class="slider-fill" id="slider-fill"></div>
                  <div class="slider-handle" id="handle-min"></div>
                  <div class="slider-handle" id="handle-max"></div>
              </div>
              <div class="cp-slider-foot">
                  <span class="cp-hint">기간 조절</span>
                  <label class="cancel-toggle" for="cancel-only-toggle">
                      <input type="checkbox" id="cancel-only-toggle" />
                      <span>거래 취소</span>
                      <span class="cp-toggle-switch" aria-hidden="true"></span>
                  </label>
              </div>
          </div>
      </div>

      <!-- [30_5] 칩 필터 : 시 → 군구 → 매매 → 분양 ······(우측) 기간 -->
      <div class="txchip-row" id="txChipRow">
          <button type="button" class="txchip has-caret" data-txpop="region">울산</button>
          <button type="button" class="txchip has-caret" data-txpop="gugun">군구</button>
          <button type="button" class="txchip" data-txtoggle="apt">매매</button>
          <button type="button" class="txchip" data-txtoggle="silv">분양</button>
          <button type="button" class="txchip has-caret" data-txpop="period">기간</button>
      </div>
      <div class="txchip-legend">차트 = 그 거래의 전용면적, 최근 24개월 추이</div>
      <!-- [30_5] 기간 팝오버 호스트 : 기존 .cp-head / .cp-slider-wrap 노드를 여기로 옮겨 재사용 -->
      <div id="txPeriodHost"></div>
      <div class="txchip-scrim" id="txChipScrim"></div>
      <div class="txchip-pop" id="txChipPop"></div>

      <div class="tp-list-area">
          <!-- [v14_10] status-bar는 숨김 (loading-status DOM은 보존, "완료" 텍스트 비표시) -->
          <div class="status-bar">
              <span id="loading-status">대기 중...</span>
          </div>
          <!-- [30_5] 리스트 헤더 : 건수 + 정렬 (거래 단위라 '건수순'은 성립하지 않는다) -->
          <div class="tx-listhead" id="txListHead">
              <div class="lh-cnt" id="txListCnt"></div>
              <div class="lh-sort">
                  <button type="button" data-txsort="recent" class="on">최신순</button>
                  <button type="button" data-txsort="price">고가순</button>
                  <button type="button" data-txsort="area">면적순</button>
              </div>
          </div>
          <ul id="list-container"></ul>
      </div>
  </div>

  <div id="toast"></div>

  <button type="button" class="tp-restore-btn" id="tpRestoreBtn"><svg width="12" height="7" viewBox="0 0 12 7" aria-hidden="true"><polygon points="6,0 12,7 0,7" fill="currentColor"/></svg></button>

  <div id="stationDisclaimer"><button type="button" id="stationDisclaimerClose" aria-label="닫기">×</button>⚠ 본 정보는 참고용이며 법적 효력이 없습니다. 역과 아파트 간 거리는 kakao map에 표시된 아파트 대표 지점 마크와  울산도시철도 1호선 기본계획 (2025년 2월)에 표시된 정거장 (각 정거장 평면도를 활용하여 kakao map에 임의 표시, 실제 위치와 차이 있음) 간의 직선거리로, 실제 해당 아파트의 정확한 위치, 아파트 내 동의 정확한 위치, 정거장의 정확한 위치에 따라 차이가 있을 수 있습니다. 매매, 임대 결정 시 반드시 현장 확인이 필요합니다. 정정 요청 및 문의: bydspc@kakao.com</div>

  <div id="schoolDisclaimer"><button type="button" id="schoolDisclaimerClose" aria-label="닫기">×</button>⚠ 본 학구도 정보는 참고용이며 법적 효력이 없습니다. 통학구역은 학사 정책에 따라 변경될 수 있으며 최종 배정은 관할 교육지원청에 확인하세요. 학교까지의 거리는 학교 대표지점(행정안전부 학교위치표준데이터) 기준 직선거리로, 실제 학교 건물 위치와 수십 m 차이가 있을 수 있습니다. 정정 요청 및 문의: bydspc@kakao.com</div>
  <!-- [30_7] 우측 하단 지도 액션 — 검색 / 내 위치.
       위치가 중요: .transactionPanel 뒤에 있어야 '.transactionPanel.open ~ #mapFabs' 규칙이 성립한다. -->
  <div id="mapFabs">
    <button type="button" class="mapfab" id="searchFab" aria-label="아파트 검색" title="아파트 검색">
      <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><line x1="15.3" y1="15.3" x2="21" y2="21"/></svg>
    </button>
    <button type="button" class="mapfab" id="gpsFab" aria-label="내 위치로 이동" title="내 위치로 이동">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="6.8"/><circle cx="12" cy="12" r="2.4" fill="currentColor" stroke="none"/><line x1="12" y1="1.6" x2="12" y2="4.4"/><line x1="12" y1="19.6" x2="12" y2="22.4"/><line x1="1.6" y1="12" x2="4.4" y2="12"/><line x1="19.6" y1="12" x2="22.4" y2="12"/></svg>
    </button>
  </div>

  <!-- [30_7] 아파트 검색 오버레이 -->
  <div id="aptSearch" role="dialog" aria-modal="true" aria-label="아파트 검색">
    <div class="as-box">
      <div class="as-bar">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><line x1="15.3" y1="15.3" x2="21" y2="21"/></svg>
        <input class="as-input" id="aptSearchInput" type="text" inputmode="search" enterkeyhint="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="아파트 · 동 이름 검색" />
        <button type="button" class="as-btn" id="aptSearchClose" aria-label="검색 닫기"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15,5 8,12 15,19"/></svg></button>
      </div>
      <div class="as-list" id="aptSearchList"></div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=b961e257d9ca9c1ac7a8aebcb5333d10"></script>
  <script>
    const APT_JSON_URL = "../map/apt_coor.json";
    // [27_37] 분양권 전용 좌표 — apt_coor.json에서 분리된 파일(같은 디렉토리). loadSilvCoords()가 읽어 APTS에 append.
    const SILV_JSON_URL = "../map/silv_coor.json";
    const mapContainer = document.getElementById('map');
    const map = new kakao.maps.Map(mapContainer, {
      center: new kakao.maps.LatLng(35.5358, 129.2900),
      level: 4
    });

    const toastEl = document.getElementById('toast');
    function toast(msg, ms=1400){
      toastEl.textContent = msg;
      toastEl.style.display = 'block';
      clearTimeout(toastEl._t);
      toastEl._t = setTimeout(()=>toastEl.style.display='none', ms);
    }

    const dotSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><circle cx="7" cy="7" r="5" fill="white" stroke="rgba(0,0,0,0.65)" stroke-width="2"/></svg>`;
    const dotUrl = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(dotSvg);
    const dotImg = new kakao.maps.MarkerImage(dotUrl, new kakao.maps.Size(14, 14), { offset: new kakao.maps.Point(7, 7) });

    function escapeHtml(s){
      return String(s).replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;").replaceAll('"',"&quot;").replaceAll("'","&#39;");
    }

    function normalizeName(s){
      return String(s ?? "").toLowerCase().replaceAll(/\s+/g, "").replaceAll(/[-_.]/g, "");
    }

    function valueTrim(v){
      return String(v ?? "").trim();
    }

    function normalizeDealAmount(v){
      return String(v ?? "").replace(/,/g, '').trim();
    }

    function normalizeDong(v){
      const s = String(v ?? "").replace(/\s+/g, '').trim();
      return s === '' ? null : s;
    }

    function isCancelledDeal(item){
      return valueTrim(item?.cdealType).toUpperCase() === 'O';
    }

    function isNormalDeal(item){
      return !isCancelledDeal(item) && valueTrim(item?.cdealDay) === '';
    }

    function getRecontractBaseKey(item){
      return [
        normalizeName(item?.aptNm),
        valueTrim(item?.sggCd),
        valueTrim(item?.umdNm),
        valueTrim(item?.jibun),
        valueTrim(item?.floor),
        valueTrim(item?.excluUseAr),
        normalizeDealAmount(item?.dealAmount),
        valueTrim(item?.dealYear),
        valueTrim(item?.dealMonth),
        valueTrim(item?.dealDay)
      ].join('|');
    }

    function isDongCompatible(a, b){
      const da = normalizeDong(a?.aptDong);
      const db = normalizeDong(b?.aptDong);
      if (da && db) return da === db;
      return true;
    }

    function getVisibleCancelledDeals(allData){
      const groups = new Map();

      allData.forEach((item, idx) => {
        const key = getRecontractBaseKey(item);
        if (!groups.has(key)) groups.set(key, { normal: [], cancel: [] });
        const group = groups.get(key);

        if (isNormalDeal(item)) {
          group.normal.push({ item, idx, dong: normalizeDong(item?.aptDong), paired: false });
        } else if (isCancelledDeal(item)) {
          group.cancel.push({ item, idx, dong: normalizeDong(item?.aptDong), paired: false });
        }
      });

      const hiddenCancelIdx = new Set();

      groups.forEach(group => {
        group.cancel.forEach(cancelEntry => {
          if (cancelEntry.paired || !cancelEntry.dong) return;

          const exactMatches = group.normal.filter(normalEntry =>
            !normalEntry.paired &&
            normalEntry.dong &&
            normalEntry.dong === cancelEntry.dong
          );

          if (exactMatches.length === 1) {
            cancelEntry.paired = true;
            exactMatches[0].paired = true;
            hiddenCancelIdx.add(cancelEntry.idx);
          }
        });

        group.cancel.forEach(cancelEntry => {
          if (cancelEntry.paired) return;

          const compatibleMatches = group.normal.filter(normalEntry =>
            !normalEntry.paired &&
            isDongCompatible(cancelEntry.item, normalEntry.item)
          );

          if (compatibleMatches.length === 1) {
            cancelEntry.paired = true;
            compatibleMatches[0].paired = true;
            hiddenCancelIdx.add(cancelEntry.idx);
          }
        });
      });

      return allData.filter((item, idx) => isCancelledDeal(item) && !hiddenCancelIdx.has(idx));
    }

    function sggCdToGu(sggCd){
      const map = {
        // 울산
        31110: '중구',
        31140: '남구',
        31170: '동구',
        31200: '북구',
        31710: '울주군',
        // [index_24] 부산 16개 시군구
        26110: '중구',
        26140: '서구',
        26170: '동구',
        26200: '영도구',
        26230: '부산진구',
        26260: '동래구',
        26290: '남구',
        26320: '북구',
        26350: '해운대구',
        26380: '사하구',
        26410: '금정구',
        26440: '강서구',
        26470: '연제구',
        26500: '수영구',
        26530: '사상구',
        26710: '기장군'
      };
      const k = Number(sggCd);
      return map[k] || '';
    }

    // [index_24] 부산 시군구 코드(26xxx) 판별 — 거래량 패널 지역별 마커 한정에 사용
    function isBusanSgg(sggCd){
      const n = Number(sggCd);
      return Number.isFinite(n) && n >= 26000 && n < 27000;
    }

    // [index_24_1] DONG_AREA_API_URL / SILV_AREA_API_URL 제거 — 명단 API(apt_dong_area.php/silv_area.php) 은퇴
    const APT_META_API_URL = "../api/apt_meta.php";   // [v23_1] 세대수 등 단지 메타(MySQL apt_master) 조회
    const SQL_TRADES_API_URL = "../api/sql_trades.php"; // [30_1] 단지별 거래(매매+분양권) 조회 — apt_trades / silv_trades
    /* [30_1] 상세 패널 거래 출처 스위치. 'db' = MySQL 1회 조회, 'json' = 월별 파일 372개(기존).
       문제 발생 시 'json'으로 되돌리면 즉시 이전 동작으로 복구된다. */
    const TRADES_SOURCE = 'db';
    /* [30_3] 동별 가격 비교 UI 스위치. 'tabs' = 면적 탭 1개 + 카드 1개(신규),
       'stacked' = 면적별 카드 N개(기존). 문제 발생 시 'stacked'로 되돌리면 즉시 복구된다. */
    const DONG_COMPARE_UI = 'tabs';
    /* [30_4] 동별 카드 내부 배치. 'chart-first' = 차트→기간바→표→힌트(신규),
       'table-first' = 표→힌트→차트→기간바(기존). */
    const DONG_CARD_ORDER = 'chart-first';
    /* [30_4] 분양가/프리미엄 섹션의 면적별 색 출처. 'summary' = 시세 추이와 동일 배정(신규),
       'own' = BUNYANG_PALETTE 자체 순번(기존). */
    const BUNYANG_COLOR_SOURCE = 'summary';
    const DONG_AREA_PANEL_DEFAULT_WIDTH = 420;
    const DONG_AREA_PANEL_MIN_WIDTH = 320;
    const dongAreaCharts = [];
    let currentDongAreaMeta = null;
    let currentDongAreaWidth = DONG_AREA_PANEL_DEFAULT_WIDTH;

    function clearDongAreaCharts(){
      while(dongAreaCharts.length){
        const c = dongAreaCharts.pop();
        try { c.destroy(); } catch(e){}
      }
    }

    function dongAreaFmt(n){
      if (n === null || n === undefined) return '';
      try {
        return Number(n).toLocaleString('ko-KR');
      } catch(e) {
        return String(n);
      }
    }

    function normalizeDongAreaMeta(meta){
      if(!meta || !meta.aptNm) return null;
      const sggCd = meta.sggCd !== null && meta.sggCd !== undefined && String(meta.sggCd).trim() !== '' ? Number(meta.sggCd) : null;
      const buildYear = meta.buildYear !== null && meta.buildYear !== undefined && String(meta.buildYear).trim() !== '' ? Number(meta.buildYear) : null;
      return {
        aptNm: valueTrim(meta.aptNm),
        gu: valueTrim(meta.gu) || sggCdToGu(sggCd),
        umdNm: valueTrim(meta.umdNm),
        buildYear: Number.isFinite(buildYear) ? buildYear : null,
        sggCd: Number.isFinite(sggCd) ? sggCd : null,
        _source: meta._source || null
      };
    }

    // [index_24_1] makeDongAreaOptionLabel 제거 — 드롭다운 옵션 라벨 생성용(명단 API 은퇴)

    // [v23_1] 세대수: apt_master(MySQL)에서 단지명+구코드로 조회 → 세대수(sds) 반환 (없으면 null)
    async function fetchAptSds(aptNm, sggCd){
      if (!aptNm) return null;
      try {
        let url = APT_META_API_URL + '?aptNm=' + encodeURIComponent(aptNm);
        if (sggCd !== null && sggCd !== undefined && String(sggCd).trim() !== '') {
          url += '&sggCd=' + encodeURIComponent(sggCd);
        }
        const res = await fetch(url, { cache: 'no-store' });
        if (!res.ok) return null;
        const data = await res.json();
        if (data && data.success && data.found && data.sds != null) return Number(data.sds);
        return null;
      } catch (e) {
        return null;
      }
    }

    // [index_24_1] fetchDongAreaJson 제거 — 명단 API 호출 전용 헬퍼(은퇴). 세대수(fetchAptSds)는 일반 fetch 사용이라 무관.

    /* ===== [v16] 섹션 헤더 (시세 추이 / 동별 가격 비교) ===== */
    function buildSummarySectionHeader(){
      const h = document.createElement('div');
      h.className = 'dap-section-header c1';
      h.id = 'dapSummarySectionHeader';
      h.innerHTML = `
        <span class="dap-section-bar"></span>
        <span class="dap-section-ico">
          <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="3,16 9,11 14,14 21,6"/>
          </svg>
        </span>
        <span>시세 추이</span>
      `;
      /* [27_30] '층 분포' 토글 버튼은 헤더에서 제거하고 기간 바 위 우측으로 이동(createXRangeSliderDOM) */
      return h;
    }

    function buildDongSectionHeader(){
      const h = document.createElement('div');
      h.className = 'dap-section-header c2';
      h.id = 'dapDongSectionHeader';
      /* [27_33] 주황 세로바(.dap-section-bar)·아이콘(.dap-section-ico) 제거 → 텍스트만 (분양가 헤더와 동일) */
      h.innerHTML = `
        <span>동별 가격 비교</span>
      `;
      return h;
    }

    /* [v21] 분양가/프리미엄 섹션 헤더 (살구 톤 c2 재사용) */
    function buildBunyangSectionHeader(){
      const h = document.createElement('div');
      h.className = 'dap-section-header c2';
      h.id = 'dapBunyangSectionHeader';
      /* [27_32] 요청 1·2 — 주황 세로바(.dap-section-bar)·달러 아이콘 제거, '비교' 삭제 */
      h.innerHTML = `
        <span>분양가 · 프리미엄</span>
      `;
      return h;
    }

    function setDongAreaTitle(meta){
      if(!meta){
        dongAreaAptName.textContent = '아파트 선택';
        dongAreaAptMeta.textContent = '지도에 표시된 아파트를 클릭하세요.';
        return;
      }

      dongAreaAptName.textContent = meta.aptNm || '';
      const parts = [];
      if(meta._source === 'silv') parts.push('분양권');
      if(meta.gu) parts.push(meta.gu);
      if(meta.umdNm) parts.push(meta.umdNm);
      if(meta.buildYear) parts.push(meta.buildYear + '년 준공');
      if(meta.sds) parts.push(Number(meta.sds).toLocaleString() + '세대');   // [v23_1] 세대수
      dongAreaAptMeta.textContent = parts.length ? parts.join(' · ') : '-';
    }

    /* [index_24_1] 명단 기구 4종 제거 — renderDongAreaSelect / ensureDongAreaAptList /
       findDongAreaMatch / setDongAreaSelectValue (apt_dong_area.php·silv_area.php action=list 은퇴).
       분양권 여부·준공년도는 loadAndRenderDongArea가 거래 도착 후 자체 판정/보강 */

    function renderDongAreaTable(areaData, aptNm){
      const dongs = areaData.dongs || [];
      const rows = areaData.rows || [];

      const card = document.createElement('div');
      card.className = 'dap-card';

      const h2 = document.createElement('h2');
      // [v16] 아파트명 텍스트 제거 — 패널 헤더에 표시됨
      const badge = document.createElement('span');
      badge.className = 'dap-area-badge c2';  // [v16] c2 클래스 = 살구 톤
      badge.textContent = `전용 ${areaData.area}㎡`;
      h2.appendChild(badge);
      card.appendChild(h2);

      const tableWrap = document.createElement('div');
      tableWrap.className = 'dap-table-wrap';

      const table = document.createElement('table');
      table.className = 'dap-table';

      const thead = document.createElement('thead');
      const trh = document.createElement('tr');
      const th0 = document.createElement('th');
      th0.textContent = '거래일자';
      trh.appendChild(th0);

      dongs.forEach(d => {
        const th = document.createElement('th');
        th.textContent = d;
        trh.appendChild(th);
      });

      thead.appendChild(trh);
      table.appendChild(thead);

      const tbody = document.createElement('tbody');
      rows.forEach(r => {
        const tr = document.createElement('tr');

        const tdDate = document.createElement('td');
        tdDate.className = 'dap-date';
        tdDate.textContent = r.date;
        tr.appendChild(tdDate);

        dongs.forEach(d => {
          const td = document.createElement('td');
          td.className = 'dap-num';
          const arr = Array.isArray(r[d]) ? r[d] : [];
          if(arr.length){
            td.innerHTML = arr.map(dongAreaFmt).join('<br>');
          } else {
            td.textContent = '';
          }
          tr.appendChild(td);
        });

        tbody.appendChild(tr);
      });

      table.appendChild(tbody);
      tableWrap.appendChild(table);

      // 5행 초과 시 접기/펼치기 토글 추가
      const totalRows = rows.length;
      if (totalRows > 5) {
        tableWrap.classList.add('collapsed');
        // SVG 삼각형 (정사각형 viewBox → rotate(180deg) 시 정확히 대칭)
        const TOGGLE_ARROW_SVG = '<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><polygon points="1,3.5 9,3.5 5,6.5" fill="currentColor"/></svg>';
        const toggleBtn = document.createElement('div');
        toggleBtn.className = 'dap-table-toggle';
        toggleBtn.innerHTML = `<span>나머지 ${totalRows - 5}건 더보기</span><span class="toggle-arrow">${TOGGLE_ARROW_SVG}</span>`;
        toggleBtn.addEventListener('click', () => {
          const isCollapsed = tableWrap.classList.contains('collapsed');
          if (isCollapsed) {
            tableWrap.classList.remove('collapsed');
            toggleBtn.classList.add('expanded');
            toggleBtn.innerHTML = `<span>접기</span><span class="toggle-arrow">${TOGGLE_ARROW_SVG}</span>`;
          } else {
            tableWrap.classList.add('collapsed');
            toggleBtn.classList.remove('expanded');
            toggleBtn.innerHTML = `<span>나머지 ${totalRows - 5}건 더보기</span><span class="toggle-arrow">${TOGGLE_ARROW_SVG}</span>`;
          }
        });
        tableWrap.appendChild(toggleBtn);
      }

      // [30_4] 'table-first'(기존)일 때만 여기서 표를 붙인다
      if (DONG_CARD_ORDER === 'table-first') card.appendChild(tableWrap);

      const hint = document.createElement('div');
      hint.className = 'dap-hint';
      hint.textContent = '※ 동 정보가 없는 거래는 제외됩니다.';
      if (DONG_CARD_ORDER === 'table-first') card.appendChild(hint);

      const chartWrap = document.createElement('div');
      chartWrap.className = 'dap-chart-wrap';

      // [v16] 차트 내부 별도 h2(아파트명+면적) 제거 — 카드 상단 h2와 정보 중복

      const canvas = document.createElement('canvas');
      canvas.height = 360;
      chartWrap.appendChild(canvas);
      card.appendChild(chartWrap);

      // [NEW] x축 범위 슬라이더 블록 (차트 바로 아래)
      const xrangeRefs = createXRangeSliderDOM();
      card.appendChild(xrangeRefs.block);

      /* [30_4] 'chart-first'(신규 기본): 차트·기간 슬라이더 뒤에 표를 붙인다.
         시세 추이 카드(차트 → 기간바 → 거래 내역 표)와 배치를 맞춘다. */
      if (DONG_CARD_ORDER === 'chart-first') {
        card.appendChild(tableWrap);
        card.appendChild(hint);
      }

      return { card, canvas, xrangeRefs };
    }

    /* ===== [v16_1] 차트 라인 그라데이션 (옵션 1 · 착시) =====
       각 색의 본색이 가운데, 양끝은 RGB×factor로 한 단계 어두운 버전.
       PALETTE_FACTOR에서 색별로 factor를 조정 가능 (1.00 = 단색, 낮을수록 양끝 진해짐).
    ============================================================ */
    const PALETTE_FACTOR = {
      '#00E5CC': 0.93, // 청록
      '#FFB380': 0.93, // 피치
      '#FF99CC': 0.97, // 핑크
      '#9966FF': 0.97, // 라벤더
      '#3399FF': 0.97, // 페리윙클
      '#339900': 0.97, // 그린
      '#C0C0C0': 0.97, // 실버
      '#FF3333': 0.97, // 레드
      '#CC9966': 0.97  // 탄
    };
    const DEFAULT_PALETTE_FACTOR = 0.95; // 매칭 안 되는 색의 폴백

    function getPaletteFactor(hex) {
      const k = String(hex || '').toUpperCase();
      return PALETTE_FACTOR[k] != null ? PALETTE_FACTOR[k] : DEFAULT_PALETTE_FACTOR;
    }

    function darkenHex(hex, factor) {
      if (!hex || hex.length < 7) return hex;
      const r = Math.round(parseInt(hex.slice(1,3), 16) * factor);
      const g = Math.round(parseInt(hex.slice(3,5), 16) * factor);
      const b = Math.round(parseInt(hex.slice(5,7), 16) * factor);
      return '#' + [r,g,b].map(v => Math.min(255, v).toString(16).padStart(2,'0')).join('');
    }

    // Chart.js scriptable borderColor용 그라데이션 생성기 (옵션 1: edge → mid → edge)
    function makeLineGradient(ctx, area, midHex) {
      const factor = getPaletteFactor(midHex);
      const edge = darkenHex(midHex, factor);
      const g = ctx.createLinearGradient(area.left, 0, area.right, 0);
      g.addColorStop(0,   edge);
      g.addColorStop(0.5, midHex);
      g.addColorStop(1,   edge);
      return g;
    }

    // 라인 dataset에 부여할 scriptable borderColor.
    // ds._dimmed === true 이면 흐린 단색 (legend hover로 다른 라인 강조 시 사용).
    function lineBorderColorFn(context) {
      const ds = context.dataset;
      const c  = context.chart;
      const { ctx, chartArea } = c;
      const mid = ds._origColor;
      if (!mid) return '#888';
      if (!chartArea) return mid;
      if (ds._dimmed) return mid + '18';
      return makeLineGradient(ctx, chartArea, mid);
    }

    /* ===== [v16_2] external tooltip (알파 + 경계선 + 그림자) =====
       Chart.js 기본 tooltip은 canvas에 그려져 box-shadow 적용 불가.
       HTML div를 body에 한 번만 만들어 두 차트가 공유하며 위치/내용/스타일 제어.
       TOOLTIP_ALPHA를 0~1 사이로 바꾸면 모든 차트 tooltip 배경 투명도가 동시에 갱신.
    ============================================================ */
    const TOOLTIP_ALPHA = 0.22;
    const TOOLTIP_BORDER = true;
    const TOOLTIP_SHADOW = true;

    // [v16_5] 차트별 전용 tooltip element. chart → element 매핑.
    // 차트 간 element 공유로 인한 충돌(한 차트가 다른 차트의 tooltip을 끄던 문제) 방지.
    const _tooltipMap = new WeakMap();
    function getTooltipEl(chart) {
      if (_tooltipMap.has(chart)) return _tooltipMap.get(chart);
      const el = document.createElement('div');
      el.className = 'x-chart-tooltip';
      el.style.cssText =
        'position:absolute;pointer-events:none;opacity:0;' +
        'transition:opacity 0.1s ease,left 0.05s linear,top 0.05s linear;' +
        'padding:10px 12px;border-radius:8px;' +
        'font-size:12px;font-weight:600;line-height:1.45;' +
        'z-index:99999;font-family:inherit;white-space:nowrap;' +
        'transform:translate(-50%,-100%) translateY(-10px);';
      const parent = chart && chart.canvas && chart.canvas.parentNode;
      if (parent) parent.appendChild(el);
      _tooltipMap.set(chart, el);
      return el;
    }

    /* [v22] 시세 추이 차트들 공통: 캔버스 바깥을 탭/클릭하면 열린 툴팁을 닫는다.
       캔버스 '안' 클릭은 Chart.js 기본 표시 동작이 담당(닫기와 충돌 방지).
       document 리스너는 전역 1회만 등록하고, dongAreaCharts를 순회하며 _tooltipMap 보유 차트를 닫는다. */
    let _xTooltipCloserBound = false;
    function bindGlobalTooltipCloser() {
      if (_xTooltipCloserBound) return;
      _xTooltipCloserBound = true;
      document.addEventListener('click', (e) => {
        if (!Array.isArray(dongAreaCharts)) return;
        dongAreaCharts.forEach(c => {
          if (!c || !c.canvas) return;
          if (!_tooltipMap.has(c)) return;             /* 시세 추이 차트만 (분양가는 별도 처리) */
          if (c.canvas.contains(e.target)) return;     /* 캔버스 안 클릭은 무시 */
          const tEl = _tooltipMap.get(c);
          if (tEl && tEl.style.opacity !== '0') {
            tEl.style.opacity = '0';
            try { c.setActiveElements([]); c.update('none'); } catch(_){}
          }
        });
      });
    }

    // dataset에서 본색 hex 추출 (모든 패턴 대응)
    function getDsMidColor(ds) {
      if (!ds) return null;
      if (ds._origColor) return ds._origColor;
      if (ds._seriesColor) return ds._seriesColor;
      if (ds._allColor)  return ds._allColor;
      if (ds._areaIdx != null && ds._areaIdx >= 0 && typeof SUMMARY_PALETTE !== 'undefined') {
        const p = SUMMARY_PALETTE[ds._areaIdx % SUMMARY_PALETTE.length];
        if (p) return p.line;
      }
      return null;
    }

    // 흰 바탕 위에 알파를 합성했을 때의 휘도 → 검정/흰 글자색
    function pickTextColorForAlpha(midHex, alpha) {
      const r = parseInt(midHex.slice(1,3), 16);
      const g = parseInt(midHex.slice(3,5), 16);
      const b = parseInt(midHex.slice(5,7), 16);
      const rC = r*alpha + 255*(1-alpha);
      const gC = g*alpha + 255*(1-alpha);
      const bC = b*alpha + 255*(1-alpha);
      const brightness = (rC*299 + gC*587 + bC*114) / 1000;
      return brightness > 140 ? '#000' : '#fff';
    }

    function externalTooltipHandler(context) {
      const { chart, tooltip } = context;
      // [v16_5] 차트별 전용 tooltip element 사용. 차트 간 충돌/이동 없음.
      const tipEl = getTooltipEl(chart);

      if (!tooltip || tooltip.opacity === 0) {
        tipEl.style.opacity = '0';
        return;
      }
      const dp = tooltip.dataPoints && tooltip.dataPoints[0];
      if (!dp) { tipEl.style.opacity = '0'; return; }

      const ds = chart.data.datasets[dp.datasetIndex];
      const mid = getDsMidColor(ds);
      if (!mid) { tipEl.style.opacity = '0'; return; }

      const r = parseInt(mid.slice(1,3), 16);
      const g = parseInt(mid.slice(3,5), 16);
      const b = parseInt(mid.slice(5,7), 16);

      // 경계선용 edge 색 (PALETTE_FACTOR 활용)
      const factor = getPaletteFactor(mid);
      const eR = Math.round(r * factor);
      const eG = Math.round(g * factor);
      const eB = Math.round(b * factor);

      // 내용 - title 배열 + body[*].lines 배열을 HTML로
      const titleArr = tooltip.title || [];
      const bodyLines = [];
      (tooltip.body || []).forEach(bd => {
        (bd.lines || []).forEach(l => bodyLines.push(l));
      });
      const titleHTML = titleArr.length
        ? `<div style="font-size:13px;font-weight:800;margin-bottom:4px;">${titleArr.map(escHtml).join('<br>')}</div>`
        : '';
      const bodyHTML  = bodyLines.length
        ? `<div>${bodyLines.map(escHtml).join('<br>')}</div>`
        : '';
      tipEl.innerHTML = titleHTML + bodyHTML;

      // 스타일
      tipEl.style.background = `rgba(${r},${g},${b},${TOOLTIP_ALPHA})`;
      tipEl.style.color = pickTextColorForAlpha(mid, TOOLTIP_ALPHA);
      tipEl.style.border = TOOLTIP_BORDER
        ? `1px solid rgba(${eR},${eG},${eB},0.7)`
        : '0 solid transparent';
      tipEl.style.boxShadow = TOOLTIP_SHADOW
        ? '0 4px 14px rgba(0,0,0,0.18)'
        : 'none';

      // [v16_4] 좌표: 캔버스가 wrap 내에서 갖는 오프셋 + Chart.js의 caret (wrap 기준 상대좌표)
      // wrap가 position: relative이므로 tipEl의 absolute 좌표가 wrap 기준이 됨.
      const left = chart.canvas.offsetLeft + tooltip.caretX;
      const top  = chart.canvas.offsetTop  + tooltip.caretY;
      tipEl.style.left = left + 'px';
      tipEl.style.top  = top  + 'px';
      tipEl.style.opacity = '1';
    }

    function escHtml(s) {
      return String(s).replace(/[&<>"']/g, c => ({
        '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
      }[c]));
    }

    /* [v22] 분양가 전용 tooltip element (차트별 전용, WeakMap).
       시세 추이 툴팁과 달리 내부 스크롤이 필요해 pointer-events:auto + hover 시 유지.
       내용 레이아웃(헤더/동·호 목록)은 .bn-tt-* 클래스(CSS)로 제어. */
    const _bunyangTtMap = new WeakMap();
    function getBunyangTooltipEl(chart){
      if (_bunyangTtMap.has(chart)) return _bunyangTtMap.get(chart);
      const el = document.createElement('div');
      el.className = 'bunyang-tooltip';
      const parent = chart && chart.canvas && chart.canvas.parentNode;
      if (parent) parent.appendChild(el);
      _bunyangTtMap.set(chart, el);
      return el;
    }
    function bunyangTtScheduleHide(el){
      if (!el) return;
      if (el._hideTimer) clearTimeout(el._hideTimer);
      el._hideTimer = setTimeout(() => { el.style.opacity = '0'; }, 140);
    }

    function buildDongAreaChart(areaData, canvas){
      if (typeof Chart === 'undefined') return;

      const dongs = areaData.dongs || [];
      const rows = areaData.rows || [];
      const labels = rows.map(r => r.date);

      // 사용자 지정 8색 팔레트
      const palette = [
        '#00E5CC', // 청록
        '#FFB380', // 피치
        '#FF99CC', // 핑크
        '#9966FF', // 라벤더
        // '#6699FF', // 페리윙클
        '#3399FF', // 페리윙클
        '#339900', // 그린
        '#C0C0C0', // 실버
        '#FF3333', // 레드
        '#CC9966'  // 탄
      ];

      // 날짜 문자열 → timestamp
      // "YY.MM" / "YYYY.MM" / "YY.MM.DD" / "YYYY.MM.DD" 모두 처리
      // new Date(year, month, day) 방식의 0~99년도 오파싱 완전 방지를 위해 ISO 문자열 사용
      function dateStrToNum(dateStr) {
        if (!dateStr) return 0;
        const parts = String(dateStr).split('.');
        if (parts.length < 2) return 0;
        let year = Number(parts[0]);
        const month = Number(parts[1]);
        const day = parts.length >= 3 ? Number(parts[2]) : 15;
        if (year < 100) year += 2000;
        const iso = `${year}-${String(month).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
        return new Date(iso).getTime();
      }

      // 월별 평균 계산 (시세 추이 computeMonthlyAvg와 동일 방식, 추가 스무딩 없음)
      function computeDongMA(dong) {
        const monthMap = {};
        rows.forEach(r => {
          const arr = Array.isArray(r[dong]) ? r[dong] : [];
          if (!arr.length) return;
          const xVal = dateStrToNum(r.date);
          const d = new Date(xVal);
          const key = d.getFullYear() * 100 + (d.getMonth() + 1);
          if (!monthMap[key]) monthMap[key] = { xSum: 0, ySum: 0, cnt: 0 };
          arr.forEach(v => {
            monthMap[key].xSum += xVal;
            monthMap[key].ySum += v;
            monthMap[key].cnt++;
          });
        });
        return Object.keys(monthMap).sort((a, b) => a - b).map(key => {
          const m = monthMap[key];
          return { x: Math.round(m.xSum / m.cnt), y: m.ySum / m.cnt };
        });
      }

      const allDatasets = [];
      const dongDatasetMap = []; // { dong, dotIdx, maIdx }

      dongs.forEach((dong, idx) => {
        const points = [];
        rows.forEach(r => {
          const arr = Array.isArray(r[dong]) ? r[dong] : [];
          const xVal = dateStrToNum(r.date);
          arr.forEach(v => { points.push({ x: xVal, y: v }); });
        });
        const color = palette[idx % 9];
        const isDashed = idx >= 9;

        // 개별 거래 점 (scatter-like)
        const dotIdx = allDatasets.length;
        allDatasets.push({
          label: dong,
          data: points,
          borderColor: 'transparent',
          backgroundColor: color,
          pointBackgroundColor: color + '60',
          pointBorderColor: 'transparent',
          pointBorderWidth: 0,
          showLine: false,
          pointRadius: points.length > 0 ? 3 : 0,
          pointHoverRadius: 6,
          pointHoverBorderColor: '#fff',
          pointHoverBorderWidth: 2,
          pointHoverBackgroundColor: color,
          _origColor: color,
          _isDot: true,
          _dongIdx: idx
        });

        // 월별 실평균 연결선 (Bezier 시각적 스무딩)
        const maPoints = computeDongMA(dong);
        const maIdx = allDatasets.length;
        allDatasets.push({
          label: dong + ' MA',
          data: maPoints,
          borderColor: lineBorderColorFn, // [v16_1] 그라데이션 (scriptable)
          backgroundColor: 'transparent',
          pointRadius: 0,
          pointHoverRadius: 0,
          showLine: true,
          spanGaps: true,
          tension: 0.5,
          cubicInterpolationMode: 'monotone',
          borderWidth: 2.5,
          borderDash: isDashed ? [6, 4] : [],
          _origColor: color,
          _isMA: true,
          _dongIdx: idx
        });

        dongDatasetMap.push({ dong, dotIdx, maIdx });
      });

      // x축 범위 계산
      const allXVals = allDatasets.flatMap(ds => ds.data.map(p => p.x)).filter(Boolean);
      const minX = allXVals.length ? Math.min(...allXVals) : 0;
      const maxX = allXVals.length ? Math.max(...allXVals) : 0;
      const pad = (maxX - minX) * 0.02 || 86400000 * 15;

      function formatDateTick(val) {
        const d = new Date(val);
        return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}`;
      }

      const chart = new Chart(canvas, {
        type: 'scatter',
        data: { datasets: allDatasets },
        plugins: [],
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: { mode: 'nearest', intersect: false },
          layout: {
            padding: { right: 4, left: 0 }
          },
          plugins: {
            legend: {
              display: true,
              position: 'top',
              labels: {
                usePointStyle: false,
                boxWidth: 28,
                boxHeight: 3,
                padding: 10,
                font: { size: 11, weight: '600' },
                generateLabels: function(chart) {
                  return dongDatasetMap.map(({ dong, maIdx }) => {
                    const maDs = allDatasets[maIdx];
                    const isVisible = chart.isDatasetVisible(maIdx);
                    return {
                      text: dong,
                      fillStyle: maDs._origColor,
                      strokeStyle: maDs._origColor,
                      lineWidth: 0,
                      lineDash: maDs.borderDash || [],
                      hidden: !isVisible,
                      datasetIndex: maIdx,
                      // [v16_1] 비활성=회색 / 활성=팔레트 색상 (undefined 폴백 제거)
                      fontColor: !isVisible ? '#bbb' : maDs._origColor
                    };
                  });
                }
              },
              onHover: function(evt, legendItem, legend) {
                const ci = legend.chart;
                const hoveredMaIdx = legendItem.datasetIndex;
                dongDatasetMap.forEach(({ dotIdx, maIdx }) => {
                  const dotDs = ci.data.datasets[dotIdx];
                  const maDs = ci.data.datasets[maIdx];
                  if (ci.getDatasetMeta(maIdx).hidden) return;
                  if (maIdx === hoveredMaIdx) {
                    // [v16_1] 강조: 그라데이션 그대로 두고 borderWidth만 굵게
                    maDs._dimmed = false;
                    maDs.borderWidth = 4;
                    dotDs.pointBackgroundColor = maDs._origColor + '90';
                  } else {
                    // [v16_1] 흐림: _dimmed 플래그 (borderColor 함수가 단색 흐림 반환)
                    maDs._dimmed = true;
                    maDs.borderWidth = 1;
                    dotDs.pointBackgroundColor = maDs._origColor + '18';
                  }
                });
                ci.update('none');
              },
              onLeave: function(evt, legendItem, legend) {
                const ci = legend.chart;
                dongDatasetMap.forEach(({ dotIdx, maIdx }) => {
                  const dotDs = ci.data.datasets[dotIdx];
                  const maDs = ci.data.datasets[maIdx];
                  maDs._dimmed = false; // [v16_1] 원래 상태(그라데이션) 복원
                  maDs.borderWidth = 2.5;
                  dotDs.pointBackgroundColor = maDs._origColor + '60';
                });
                ci.update('none');
              },
              onClick: function(evt, legendItem, legend) {
                const ci = legend.chart;
                dongDatasetMap.forEach(({ dotIdx, maIdx }) => {
                  const dotDs = ci.data.datasets[dotIdx];
                  const maDs = ci.data.datasets[maIdx];
                  maDs._dimmed = false; // [v16_1] 원래 상태로 리셋
                  maDs.borderWidth = 2.5;
                  dotDs.pointBackgroundColor = maDs._origColor + '60';
                });
                const maIdx = legendItem.datasetIndex;
                const match = dongDatasetMap.find(m => m.maIdx === maIdx);
                if (!match) return;
                const isVisible = ci.isDatasetVisible(match.maIdx);
                if (isVisible) {
                  ci.getDatasetMeta(match.maIdx).hidden = true;
                  ci.getDatasetMeta(match.dotIdx).hidden = true;
                } else {
                  ci.data.datasets[match.maIdx].hidden = false;
                  ci.data.datasets[match.dotIdx].hidden = false;
                  ci.getDatasetMeta(match.maIdx).hidden = null;
                  ci.getDatasetMeta(match.dotIdx).hidden = null;
                }
                ci.update();
              }
            },
            tooltip: {
              // [v16_2] 기본 tooltip 비활성 + external HTML div로 대체 (그림자 적용 가능하도록)
              enabled: false,
              external: externalTooltipHandler,
              // [v16_1] 검은 배경 → 해당 라인의 팔레트 색 반투명 배경
              // (enabled:false 상태에서 backgroundColor/titleColor/bodyColor는 호출되지 않음.
              //  기존 정의는 남겨두되 실제 스타일은 external 핸들러가 처리)
              backgroundColor: function(ctx) {
                const item = ctx.tooltipItems && ctx.tooltipItems[0];
                if (!item) return 'rgba(0,0,0,0.82)';
                const ds = allDatasets[item.datasetIndex];
                const mid = ds && ds._origColor;
                if (!mid) return 'rgba(0,0,0,0.82)';
                // hex → rgba(r,g,b,0.92)
                const r = parseInt(mid.slice(1,3), 16);
                const g = parseInt(mid.slice(3,5), 16);
                const b = parseInt(mid.slice(5,7), 16);
                return `rgba(${r},${g},${b},0.92)`;
              },
              // [v16_1] 글자색은 휘도 기반 (밝은 배경 → 검정 / 어두운 배경 → 흰색)
              titleColor: function(ctx) {
                const item = ctx.tooltipItems && ctx.tooltipItems[0];
                if (!item) return '#fff';
                const ds = allDatasets[item.datasetIndex];
                const mid = ds && ds._origColor;
                if (!mid) return '#fff';
                const r = parseInt(mid.slice(1,3), 16);
                const g = parseInt(mid.slice(3,5), 16);
                const b = parseInt(mid.slice(5,7), 16);
                return ((r*299 + g*587 + b*114) / 1000) > 140 ? '#000' : '#fff';
              },
              bodyColor: function(ctx) {
                const item = ctx.tooltipItems && ctx.tooltipItems[0];
                if (!item) return '#fff';
                const ds = allDatasets[item.datasetIndex];
                const mid = ds && ds._origColor;
                if (!mid) return '#fff';
                const r = parseInt(mid.slice(1,3), 16);
                const g = parseInt(mid.slice(3,5), 16);
                const b = parseInt(mid.slice(5,7), 16);
                return ((r*299 + g*587 + b*114) / 1000) > 140 ? '#000' : '#fff';
              },
              titleFont: { size: 12, weight: '700' },
              bodyFont: { size: 12, weight: '500' },
              padding: 10,
              cornerRadius: 8,
              filter: (tooltipItem) => {
                const ds = allDatasets[tooltipItem.datasetIndex];
                return ds && ds._isDot;
              },
              callbacks: {
                title: (items) => {
                  if (!items.length) return '';
                  return formatDateTick(items[0].parsed.x);
                },
                // [v16_1] 가격 중복 제거: 7.0억 한 줄. (rows에 층 정보 없어 동별 차트는 가격만)
                label: (ctx) => {
                  const v = ctx.parsed.y;
                  const eok = (v / 10000).toFixed(1);
                  return ` ${ctx.dataset.label}: ${eok}억`;
                }
              }
            }
          },
          scales: {
            x: {
              type: 'linear',
              min: minX - pad,
              max: maxX + pad,
              ticks: {
                maxRotation: 45,
                minRotation: 45,
                autoSkip: true,
                maxTicksLimit: 12,
                font: { size: 10 },
                callback: formatDateTick
              },
              grid: { display: false }
            },
            y: {
              beginAtZero: false,
              grid: { color: 'rgba(0,0,0,0.06)', drawBorder: false },
              ticks: {
                callback: (value) => {
                  const eok = value / 10000;
                  return eok.toFixed(1) + '억';
                },
                font: { size: 10 }
              }
            }
          }
        }
      });

      chart._dataMinX = minX;
      chart._dataMaxX = maxX;
      dongAreaCharts.push(chart);
      bindGlobalTooltipCloser();   /* [v22] 캔버스 바깥 탭 시 툴팁 닫기 (1회 등록) */
      return chart;
    }

    /* ===== [x축 범위 슬라이더 공용 함수] ===== */
    // 카드 하단에 붙일 슬라이더 DOM을 생성하여 반환한다.
    function createXRangeSliderDOM() {
      const block = document.createElement('div');
      block.className = 'xrange-block';
      block.innerHTML = `
        <div class="xrange-label-row">
          <span class="xrange-title">기간</span>
          <span class="xrange-range-text"></span>
        </div>
        <div class="xrange-slider-container">
          <div class="xrange-slider-track"></div>
          <div class="xrange-slider-fill"></div>
          <div class="xrange-slider-handle" data-role="min"></div>
          <div class="xrange-slider-handle" data-role="max"></div>
        </div>
        <div class="xrange-preset-row">
          <div class="xrange-presets">
            <button type="button" class="xrange-presetBtn" data-months="12">1년</button>
            <button type="button" class="xrange-presetBtn" data-months="24">2년</button>
            <button type="button" class="xrange-presetBtn" data-months="36">3년</button>
            <button type="button" class="xrange-presetBtn active" data-months="60">5년</button>
            <button type="button" class="xrange-presetBtn" data-months="0">전체</button>
          </div>
          <button type="button" class="dap-floor-toggle" data-role="floorToggle" hidden>층 분포</button>
        </div>
      `;
      return {
        block,
        slider: block.querySelector('.xrange-slider-container'),
        minHandle: block.querySelector('[data-role=min]'),
        maxHandle: block.querySelector('[data-role=max]'),
        fill: block.querySelector('.xrange-slider-fill'),
        rangeText: block.querySelector('.xrange-range-text'),
        presets: block.querySelector('.xrange-presets'),
        floorToggle: block.querySelector('[data-role=floorToggle]')   /* [27_30] 층 분포 토글 (시세추이에서만 사용) */
      };
    }

    // chart._dataMinX / _dataMaxX (원본 데이터 범위, pad 미포함)를 기준으로
    // 슬라이더/프리셋을 바인딩해 chart.options.scales.x.min/max 를 갱신한다.
    function bindChartXRangeSlider(chart, refs, rangeState) {
      if (!chart || !refs) return;
      const dataMinX = chart._dataMinX;
      const dataMaxX = chart._dataMaxX;
      if (!Number.isFinite(dataMinX) || !Number.isFinite(dataMaxX)) return;
      const totalSpan = dataMaxX - dataMinX;
      if (totalSpan <= 0) return;

      const { slider, minHandle, maxHandle, fill, rangeText, presets } = refs;

      let curMin = 0;
      let curMax = 1;

      function monthsBetween(a, b) {
        const da = new Date(a);
        const db = new Date(b);
        return (db.getFullYear() - da.getFullYear()) * 12 + (db.getMonth() - da.getMonth());
      }

      function fmtYM(ts) {
        const d = new Date(ts);
        return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}`;
      }

      const totalMonths = Math.max(1, monthsBetween(dataMinX, dataMaxX));

      // [index_25_1] 상세 패널을 열면 최근 5년을 먼저 표시한다.
      // [index_26] 단일 시세 차트의 면적대 전환 시에는 사용자가 선택한 프리셋을 유지한다.
      const DEFAULT_MONTHS = 60;
      if (rangeState && Number.isFinite(rangeState.presetMonths)) {
        const m = Number(rangeState.presetMonths);
        if (m === 0 || m >= totalMonths) {
          curMin = 0;
          curMax = 1;
        } else {
          curMax = 1;
          curMin = Math.max(0, 1 - m / totalMonths);
        }
      } else if (rangeState && Number.isFinite(rangeState.curMin) && Number.isFinite(rangeState.curMax)) {
        curMin = Math.max(0, Math.min(1, Number(rangeState.curMin)));
        curMax = Math.max(curMin + 0.02, Math.min(1, Number(rangeState.curMax)));
      } else if (totalMonths > DEFAULT_MONTHS) {
        curMin = Math.max(0, 1 - DEFAULT_MONTHS / totalMonths);
      }

      function apply() {
        const selMinX = dataMinX + totalSpan * curMin;
        const selMaxX = dataMinX + totalSpan * curMax;
        //26년 6월 15일 수정
        const pad = (selMaxX - selMinX) * 0.02 || 86400000 * 15;
        chart.options.scales.x.min = selMinX - pad;
        // chart.options.scales.x.min = selMinX;
        chart.options.scales.x.max = selMaxX + pad;
        // chart.options.scales.x.max = selMaxX;
        chart.update('none');

        // [index_26_2] 차트별 부가 UI(시세 추이 버튼 건수 등)가 현재 기간을 따라갈 수 있게 원본 선택 범위를 노출
        chart._selectedMinX = selMinX;
        chart._selectedMaxX = selMaxX;
        if (typeof chart._onXRangeChange === 'function') {
          chart._onXRangeChange(selMinX, selMaxX);
        }

        minHandle.style.left = (curMin * 100) + '%';
        maxHandle.style.left = (curMax * 100) + '%';
        fill.style.left = (curMin * 100) + '%';
        fill.style.width = ((curMax - curMin) * 100) + '%';

        if (rangeText) {
          rangeText.textContent = `${fmtYM(selMinX)} ~ ${fmtYM(selMaxX)}`;
        }

        if (rangeState) {
          rangeState.curMin = curMin;
          rangeState.curMax = curMax;
        }

        if (presets) {
          const selMonths = monthsBetween(selMinX, selMaxX);
          const isFullRange = (curMin === 0 && curMax === 1);
          presets.querySelectorAll('.xrange-presetBtn').forEach(b => {
            const m = Number(b.dataset.months);
            let active;
            if (m === 0) {
              active = isFullRange;
            } else {
              active = !isFullRange
                && Math.abs(selMonths - m) <= 1
                && Math.abs(curMax - 1) < 0.02;
            }
            b.classList.toggle('active', active);
          });
        }
      }

      apply();

      function getRatio(e) {
        const rect = slider.getBoundingClientRect();
        const cx = e.touches ? e.touches[0].clientX : e.clientX;
        let x = cx - rect.left;
        if (x < 0) x = 0;
        if (x > rect.width) x = rect.width;
        return x / rect.width;
      }

      function onDrag(isMin) {
        return function (e) {
          const r = getRatio(e);
          if (isMin) curMin = Math.min(r, curMax - 0.02);
          else curMax = Math.max(r, curMin + 0.02);
          if (rangeState) rangeState.presetMonths = null;
          apply();
        };
      }

      function attach(el, isMin) {
        const move = onDrag(isMin);
        function end() {
          document.removeEventListener('mousemove', move);
          document.removeEventListener('mouseup', end);
          document.removeEventListener('touchmove', move);
          document.removeEventListener('touchend', end);
        }
        el.addEventListener('mousedown', (e) => {
          e.preventDefault();
          document.addEventListener('mousemove', move);
          document.addEventListener('mouseup', end);
        });
        el.addEventListener('touchstart', (e) => {
          document.addEventListener('touchmove', move, { passive: false });
          document.addEventListener('touchend', end);
        }, { passive: true });
      }

      attach(minHandle, true);
      attach(maxHandle, false);

      if (presets) {
        presets.querySelectorAll('.xrange-presetBtn').forEach(btn => {
          btn.addEventListener('click', () => {
            const m = Number(btn.dataset.months);
            if (rangeState) rangeState.presetMonths = m;
            if (m === 0 || m >= totalMonths) {
              curMin = 0;
              curMax = 1;
            } else {
              const ratio = m / totalMonths;
              curMax = 1;
              curMin = Math.max(0, 1 - ratio);
            }
            apply();
          });
        });
      }
    }

    /* ===== [종합 시세 차트 기능] ===== */
    let summaryChartInstances = [];
    let summaryAllTrades = [];
    let summaryAreaGroups = {};
    let summaryRoundedGroups = {};
    let summaryCardRefs = []; // [index_26] 단일 탐색 카드 ref 1개만 보유
    /* [27_29] 층 분포 패널 표시 여부. 기본 false(숨김), 헤더의 '층 분포' 버튼으로 토글.
       세션 동안 유지되어 다른 아파트를 열어도 마지막 선택이 이어진다 */
    let summaryFloorPanelOpen = false;

    /* [27_29] 토글 반영: 슬롯 표시/숨김 → 차트 폭 변화 → 기간바 축 재정렬.
       닫을 때 층 필터가 걸려 있으면 전체로 되돌린다 (보이지 않는 필터가 차트·거래표에 남는 혼란 방지) */
    function applySummaryFloorPanelVisibility(){
      summaryCardRefs.forEach(ref => {
        if (!ref || !ref.floorHost) return;
        const btn = ref.xrangeRefs && ref.xrangeRefs.floorToggle;   /* [27_30] 토글은 기간 바 위로 이동 */
        if (btn) btn.classList.toggle('on', summaryFloorPanelOpen);
        const hasFloor = !!ref.floorState;
        ref.floorHost.style.display = (summaryFloorPanelOpen && hasFloor) ? '' : 'none';
        if (!summaryFloorPanelOpen && hasFloor && summaryFloorActive(ref)) {
          ref.floorState.fMin = 1;
          ref.floorState.fMax = ref.floorState.maxFloor;
          applySummaryFloorFilter(ref);     /* 차트·면적 버튼 건수 복원 */
          updateSummaryHighlight();         /* 거래 내역 표 복원 */
        }
        if (ref.chart && typeof ref.chart.resize === 'function') ref.chart.resize();
        requestAnimationFrame(() => {
          alignSummaryXRangeToAxis(ref);
          if (summaryFloorPanelOpen) redrawSummaryFloorHeatmap(ref);
        });
      });
    }
    let summaryExplorerRef = null;

    // [v16_3] 신규 거래 키 집합(거래 단위) — loadCurrentRangeData에서 갱신
    let summaryNewTxKeySet = new Set();

    const SUMMARY_PALETTE = [
      { line: '#FFB380' }, // 피치
      { line: '#FF99CC' }, // 핑크
      { line: '#9966FF' }, // 라벤더
      { line: '#3399FF' }, // 페리윙클 (v16_1: #6699FF → #3399FF, 동별 차트와 통일)
      { line: '#339900' }, // 그린
      { line: '#C0C0C0' }, // 실버
      { line: '#FF3333' }, // 레드
      { line: '#CC9966' }  // 탄
    ];

    // [index_26] 색상만으로 부족할 때를 대비한 선 패턴 조합
    const SUMMARY_DASH_PATTERNS = [
      [],                 // 실선
      [8, 4],             // 긴 점선(하이픈)
      [2, 4],             // 점선
      [10, 3, 2, 3]       // 일점쇄선
    ];

    function getSummarySeriesStyle(areaIdx) {
      const color = SUMMARY_PALETTE[areaIdx % SUMMARY_PALETTE.length].line;
      // 첫 면적들부터 선 모양 차이가 보이되, 같은 색이 다시 나올 때는 다른 패턴이 되도록 순환
      const dashIdx = (areaIdx + Math.floor(areaIdx / SUMMARY_PALETTE.length)) % SUMMARY_DASH_PATTERNS.length;
      return { color, dash: SUMMARY_DASH_PATTERNS[dashIdx].slice() };
    }

    // [index_26_5] '전체'(group) 시리즈 색 팔레트: 민트를 맨 앞에 두고 정확 면적과 동일한 팔레트를 이어 붙임.
    // → 전체 버튼/라인이 민트→피치→핑크… 순으로 구분됨. 정확 면적 팔레트와 시작점을 어긋나게 해(아래 buildSummarySeriesSpecs)
    //   전체선과 정확면적선의 색 충돌을 피한다(시리즈 9개 초과 시에만 순환으로 재사용).
    const SUMMARY_GROUP_PALETTE = ['#00E5CC'].concat(SUMMARY_PALETTE.map(p => p.line));
    function getSummaryGroupColor(groupIdx) {
      return SUMMARY_GROUP_PALETTE[groupIdx % SUMMARY_GROUP_PALETTE.length];
    }

    /* [30_4] 시세 추이의 '정확 면적' 색 배정을 다른 섹션(분양가/프리미엄)에서도 그대로 쓰기 위한 조회표.
       반환: { '59.9200': '#FFB380', ... }  키는 면적값.toFixed(4) — "59.11"/"59.1100" 표기 차이를 흡수한다.
       buildSummarySeriesSpecs의 순회 순서(groupLabels 오름차순 → 그룹 내 areaKeys 오름차순)와
       exactStyleOffset을 그대로 재현하므로 두 섹션의 색이 정확히 일치한다.
       summaryRoundedGroups가 아직 비어 있으면 빈 객체를 돌려주고, 호출부는 기존 색을 그대로 쓴다. */
    function buildSummaryExactAreaColorMap() {
      const map = {};
      const groupLabels = Object.keys(summaryRoundedGroups || {}).sort((a, b) => Number(a) - Number(b));
      if (!groupLabels.length) return map;

      const exactStyleOffset = Math.max(0, groupLabels.length - 1);
      let exactStyleIdx = 0;

      groupLabels.forEach(groupLabel => {
        (summaryRoundedGroups[groupLabel] || []).forEach(areaKey => {
          const style = getSummarySeriesStyle(exactStyleOffset + exactStyleIdx++);
          const v = parseFloat(areaKey);
          if (Number.isFinite(v)) map[v.toFixed(4)] = style.color;
        });
      });
      return map;
    }

    function buildSummaryColorDot(color) {
      return `<span class="dap-summary-color-dot" style="--summary-dot-color:${color}" aria-hidden="true"></span>`;
    }

    // Chart.js 플러그인: 라인 끝에 면적 라벨 표시
    const summaryEndLabelPlugin = {
      id: 'summaryEndLabels',
      afterDraw(chart) {
        const { ctx, chartArea } = chart;
        chart.data.datasets.forEach((ds, i) => {
          const meta = chart.getDatasetMeta(i);
          if (meta.hidden) return;
          const points = meta.data.filter(p => !isNaN(p.x) && !isNaN(p.y));
          if (!points.length) return;
          const last = points[points.length - 1];
          if (!last || last.x == null) return;
          ctx.save();
          ctx.font = 'bold 11px "Pretendard Variable", "Pretendard", system-ui, sans-serif';
          // [v16_1] borderColor가 그라데이션 함수가 됐으므로 _origColor(mid hex) 사용
          ctx.fillStyle = ds._origColor || ds.borderColor || '#666';
          ctx.textAlign = 'left';
          ctx.textBaseline = 'middle';
          ctx.fillText(ds.label, last.x + 6, last.y);
          ctx.restore();
        });
      }
    };

    async function fetchAllTradesForApt(aptNm, sggCd, umdNm) {
      /* [30_1] MySQL 경로. 응답이 국토부 원본 필드명 + _source 그대로라 후속 처리 무수정.
         서버가 sgg + 이름 완전일치로 매매·분양권을 함께 조회하고 정상거래만 돌려준다.
         실패 시 throw — 호출부 catch 가 '종합 차트 로드 실패'를 표시한다.
         (빈 배열을 반환하면 '거래 데이터가 없습니다'로 잘못 보인다) */
      if (TRADES_SOURCE === 'db') {
        const url = SQL_TRADES_API_URL
                  + '?sgg='  + encodeURIComponent(sggCd)
                  + '&name=' + encodeURIComponent(aptNm);
        const res = await fetch(url);
        if (!res.ok) throw new Error('거래 조회 실패 (HTTP ' + res.status + ')');
        const rows = await res.json();
        if (!Array.isArray(rows)) throw new Error('거래 조회 응답 형식 오류');
        /* 서버가 이미 해제거래를 제외하지만, 기존 경로와 판정 기준을 완전히 일치시킨다 */
        return rows.filter(isNormalDeal);
      }

      /* ↓↓↓ 이하 기존 JSON 경로 — TRADES_SOURCE === 'json' 일 때만 실행 (30_1에서 미수정) ↓↓↓ */
      const allFileSpecs = [];
      // [index_25] 상세 패널은 클릭 단지의 지역 파일만 조회한다.
      //   울산(31xxx) → ../data, 부산(26xxx) → ../data/busan
      const detailDataBase = isBusanSgg(sggCd) ? '../data/busan' : '../data';
      let cy = START_YEAR, cm = START_MONTH;
      while (true) {
        if (cy > END_YEAR || (cy === END_YEAR && cm > END_MONTH)) break;
        const mm = String(cm).padStart(2, '0');
        allFileSpecs.push({ file: `${detailDataBase}/apt/data_${cy}_${mm}.json`, source: 'apt' });
        allFileSpecs.push({ file: `${detailDataBase}/silv/silv_${cy}_${mm}.json`, source: 'silv' });
        cm++;
        if (cm > 12) { cm = 1; cy++; }
      }

      const results = await Promise.all(allFileSpecs.map(async ({ file, source }) => {
        if (fileCache[file]) return fileCache[file];
        try {
          const res = await fetch(file);
          if (!res.ok) return [];
          const json = await res.json();
          const tagged = json.map(item => ({ ...item, _source: source }));
          fileCache[file] = tagged;
          return tagged;
        } catch (e) { return []; }
      }));

      const allData = results.flat();
      const nTarget = normalizeName(aptNm);

      return allData.filter(item => {
        if (normalizeName(item.aptNm) !== nTarget) return false;
        if (!isNormalDeal(item)) return false;
        if (sggCd != null && Number(item.sggCd) !== Number(sggCd)) return false;
        return true;
      });
    }

    function groupTradesByArea(trades) {
      const groups = {};
      trades.forEach(item => {
        const area = String(item.excluUseAr || '').trim();
        if (!area) return;
        if (!groups[area]) groups[area] = [];
        groups[area].push(item);
      });
      Object.values(groups).forEach(arr => {
        arr.sort((a, b) => {
          const da = a.dealYear * 10000 + a.dealMonth * 100 + a.dealDay;
          const db = b.dealYear * 10000 + b.dealMonth * 100 + b.dealDay;
          return da - db;
        });
      });
      return groups;
    }

    /* [v22_3] Route1: 거래 배열 → 동별 가격표(areas) 변환
       기존 apt_dong_area.php(action=data)가 item.json으로 만들던 areas를,
       fetchAllTradesForApt()가 가져온 최신 거래(data_*.json)로 클라에서 동일 생성.
       출력 형태는 PHP와 100% 동일: [{area, dongs, rows:[{date,[dong]:[금액]}]}]
       → renderDongAreaTable / buildDongAreaChart 무수정 재사용 */
    function buildAreasFromTrades(trades){
      function dongLabel(v){                          // PHP normalize_dong 동일
        if (v === null || v === undefined) return '';
        const s = String(v).replace(/\s+/g, '').trim();
        if (s === '' || s === '0') return '';
        if (/^\d+$/.test(s)) { const n = parseInt(s, 10); return n > 0 ? (n + '동') : ''; }
        return s;
      }
      function dongSort(label){                        // PHP dong_sort_key 동일
        const m = String(label).match(/^\d+/);
        return m ? parseInt(m[0], 10) : Number.MAX_SAFE_INTEGER;
      }
      function amountOf(v){                            // PHP parse_amount 동일
        if (v === null || v === undefined) return null;
        const s = String(v).replace(/,/g, '').replace(/\s+/g, '');
        if (s === '' || !/^-?\d+$/.test(s)) return null;
        return parseInt(s, 10);
      }
      function dStr(y, m, d){                           // PHP make_date_str 동일 ('YY.MM.DD')
        const pad = n => String(n).padStart(2, '0');
        return pad(((y % 100) + 100) % 100) + '.' + pad(m) + '.' + pad(d);
      }

      const groups = {}; // areaKey -> { dongs:{}, dsort:{dateStr:num}, cells:{dateStr:{dong:[amt]}} }
      (trades || []).forEach(t => {
        if (!t) return;
        const dong = dongLabel(t.aptDong);
        if (dong === '') return;                         // 동 없는 거래 제외 (PHP 동일)
        if (t.excluUseAr === undefined || t.excluUseAr === null || String(t.excluUseAr).trim() === '') return;
        const areaVal = parseFloat(t.excluUseAr);
        if (!isFinite(areaVal)) return;
        const areaKey = Math.floor(areaVal + 1e-9);       // 전용 68, 84 ...

        const y = parseInt(t.dealYear, 10), m = parseInt(t.dealMonth, 10), d = parseInt(t.dealDay, 10);
        if (!y || !m || !d) return;
        const ds = dStr(y, m, d);
        const dsort = y * 10000 + m * 100 + d;

        const amt = amountOf(t.dealAmount);
        if (amt === null) return;

        let g = groups[areaKey];
        if (!g) g = groups[areaKey] = { dongs: {}, dsort: {}, cells: {} };
        g.dongs[dong] = true;
        if (g.dsort[ds] === undefined || g.dsort[ds] > dsort) g.dsort[ds] = dsort;
        if (!g.cells[ds]) g.cells[ds] = {};
        if (!g.cells[ds][dong]) g.cells[ds][dong] = [];
        g.cells[ds][dong].push(amt);
      });

      const out = [];
      Object.keys(groups).map(Number).sort((a, b) => a - b).forEach(areaKey => {
        const g = groups[areaKey];
        const dongs = Object.keys(g.dongs).sort((a, b) => {
          const ka = dongSort(a), kb = dongSort(b);
          return ka === kb ? (a < b ? -1 : a > b ? 1 : 0) : ka - kb;
        });
        const dates = Object.keys(g.dsort).sort((a, b) => g.dsort[a] - g.dsort[b]);
        const rows = dates.map(ds => {
          const row = { date: ds };
          dongs.forEach(dong => { row[dong] = g.cells[ds][dong] || []; });
          return row;
        });
        if (rows.length === 0 || dongs.length === 0) return;
        out.push({ area: areaKey, dongs, rows });
      });
      return out;
    }

    /* =========================================================
       [30_3] 동별 가격 비교 — 면적 탭 1개 + 카드 1개
       DONG_COMPARE_UI === 'tabs' 일 때만 사용. 'stacked'면 이 블록은 호출되지 않는다.
       renderDongAreaTable / buildDongAreaChart / buildAreasFromTrades 는 전부 무수정 재사용하고,
       여기서는 '어느 면적을 보여줄지'와 '옛 차트를 어떻게 치울지'만 담당한다.
       ========================================================= */

    /* 면적 탭에 붙는 거래 건수 — 셀(동×날짜)에 담긴 금액 개수의 총합 */
    function countDongCompareTrades(areaData){
      if (!areaData) return 0;
      const dongs = areaData.dongs || [];
      let n = 0;
      (areaData.rows || []).forEach(r => {
        dongs.forEach(d => { if (Array.isArray(r[d])) n += r[d].length; });
      });
      return n;
    }

    /* 기본 선택 면적 — 시세 추이(computeDefaultSelectedSeries)와 같은 규칙.
       거래량 모드 ON이고 클릭 단지에 신규 거래가 있으면 그 거래의 면적, 아니면 가장 작은 면적.
       areas는 buildAreasFromTrades가 면적 오름차순으로 돌려주므로 areas[0]이 최소 면적이다. */
    function computeDefaultDongCompareArea(areas){
      const fallback = (areas && areas.length) ? areas[0].area : null;
      if (!isTransactionMode) return fallback;
      if (!summaryNewTxKeySet || summaryNewTxKeySet.size === 0) return fallback;
      if (!Array.isArray(summaryAllTrades) || !summaryAllTrades.length) return fallback;

      const newAreaKeys = new Set();
      summaryAllTrades.forEach(t => {
        if (!summaryNewTxKeySet.has(makeSummaryTxKey(t))) return;
        const v = parseFloat(t && t.excluUseAr);
        if (Number.isFinite(v)) newAreaKeys.add(Math.floor(v + 1e-9));   /* buildAreasFromTrades와 동일 키 */
      });
      if (!newAreaKeys.size) return fallback;

      const hit = areas.find(a => newAreaKeys.has(a.area));
      return hit ? hit.area : fallback;
    }

    /* 탭 전환 시 옛 차트 정리 — dongAreaCharts에서 빼낸 뒤 destroy.
       (시세 추이 destroySummaryExplorerChart와 같은 취지. 안 하면 배열이 계속 커지고
        bindGlobalTooltipCloser가 이미 파기된 차트를 순회한다) */
    function destroyDongCompareChart(ref){
      const oldChart = ref && ref.chart;
      if (!oldChart) return;
      const di = dongAreaCharts.indexOf(oldChart);
      if (di >= 0) dongAreaCharts.splice(di, 1);
      try { oldChart.destroy(); } catch (e) {}
      ref.chart = null;
    }

    /* 카드 골격 = [면적 탭] + [본문 호스트]. 본문은 renderDongCompareBody가 매번 새로 채운다. */
    function buildDongCompareCard(areas, aptNm){
      const card = document.createElement('div');
      card.className = 'dap-card';

      const tabs = document.createElement('div');
      tabs.className = 'dap-dong-tabs';
      bindScrollbarAutoHide(tabs);   /* 면적이 많아 가로 스크롤이 생길 때만 스크롤바 잠깐 노출 */
      card.appendChild(tabs);

      const bodyHost = document.createElement('div');
      bodyHost.className = 'dap-dong-body';
      card.appendChild(bodyHost);

      return {
        card,
        tabs,
        bodyHost,
        aptNm,
        areas,
        areaMap: new Map((areas || []).map(a => [a.area, a])),
        selectedArea: computeDefaultDongCompareArea(areas),
        tabButtonMap: new Map(),
        chart: null,
        /* 탭 전환 간 기간 유지용 공유 상태. bindChartXRangeSlider가 curMin/curMax·presetMonths를
           되써준다. 초기 presetMonths:60 = 인자 없이 호출하던 종전 기본(최근 5년)과 동일. */
        xrangeState: { presetMonths: 60, curMin: 0, curMax: 1 }
      };
    }

    function syncDongCompareTabActive(ref){
      if (!ref || !ref.tabButtonMap) return;
      ref.tabButtonMap.forEach((btn, areaKey) => {
        const active = (areaKey === ref.selectedArea);
        btn.classList.toggle('active', active);
        btn.setAttribute('aria-pressed', active ? 'true' : 'false');
      });
    }

    /* 면적 탭(단일 선택). 동별 차트는 색이 '동'에 배정되므로 두 면적을 겹치면 같은 색이
       두 번 나온다 → 다중 선택·'전체' 탭은 두지 않는다. */
    function renderDongCompareTabs(ref){
      if (!ref || !ref.tabs) return;
      ref.tabs.innerHTML = '';
      ref.tabButtonMap = new Map();

      /* 면적이 하나뿐이면 선택지가 없으므로 탭 줄 자체를 감춘다 */
      if (!ref.areas || ref.areas.length <= 1) {
        ref.tabs.style.display = 'none';
        return;
      }
      ref.tabs.style.display = '';

      const row = document.createElement('div');
      row.className = 'dap-dong-tab-row';

      ref.areas.forEach(areaData => {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'dap-dong-tab';
        const active = (areaData.area === ref.selectedArea);
        btn.classList.toggle('active', active);
        btn.setAttribute('aria-pressed', active ? 'true' : 'false');
        btn.innerHTML = `<span>${areaData.area}㎡</span><span class="cnt">${countDongCompareTrades(areaData)}건</span>`;

        btn.addEventListener('click', () => {
          if (ref.selectedArea === areaData.area) return;   /* 같은 탭 재클릭 시 재렌더 안 함 */
          ref.selectedArea = areaData.area;
          syncDongCompareTabActive(ref);
          renderDongCompareBody(ref);
        });

        row.appendChild(btn);
        ref.tabButtonMap.set(areaData.area, btn);
      });

      ref.tabs.appendChild(row);
    }

    /* 선택 면적의 표 + 차트 + 기간 슬라이더를 본문에 통째로 다시 그린다. */
    function renderDongCompareBody(ref){
      if (!ref || !ref.bodyHost) return;

      destroyDongCompareChart(ref);
      ref.bodyHost.innerHTML = '';

      const areaData = ref.areaMap.get(ref.selectedArea);
      if (!areaData) return;

      /* renderDongAreaTable은 완성된 .dap-card를 돌려준다. 바깥 카드가 이미 .dap-card이므로
         클래스만 벗겨 테두리·여백 이중 적용을 막고, 면적 배지 h2는 활성 탭이 대신하므로 제거한다.
         .dap-card 관련 CSS는 3개(.dap-card/:hover/h2)뿐이고 직계자식 선택자가 없어
         하위 스타일(.dap-table-wrap, .dap-chart-wrap 등)은 바깥 카드 기준으로 그대로 적용된다. */
      const { card: inner, canvas, xrangeRefs } = renderDongAreaTable(areaData, ref.aptNm);
      inner.classList.remove('dap-card');
      const badgeH2 = inner.querySelector('h2');
      if (badgeH2) badgeH2.remove();
      ref.bodyHost.appendChild(inner);

      const chart = buildDongAreaChart(areaData, canvas);
      if (chart) {
        ref.chart = chart;
        bindChartXRangeSlider(chart, xrangeRefs, ref.xrangeState);   /* 3번째 인자 = 탭 전환 간 기간 유지 */
      }
    }

    /* =========================================================
       [v21] 분양권 전용: 분양가 / 프리미엄 비교 기능
       ========================================================= */
    /* 단지명(aptNm) → 분양가 JSON 파일명 매핑
       키는 normalizeName()을 거친 형태(공백·기호 제거, 소문자)로 저장하여
       서버가 돌려준 aptNm과 원본 aptNm 간 표기 차이에 영향받지 않도록 함 */
    const BUNYANG_FILE_MAP_RAW = {
      '한화포레나 울산무거': 'HANHWAFORENA_MUGEO.json',
      '번영로 하늘채 라크뷰': 'BEONYEONGRO_HANULCHE_LAKEVIEW.json',
      '라엘에스': 'LALS.json',
      '문수로 롯데캐슬 그랑파르크': 'LOTTECASTLE_GRAND_PARK.json',
      '힐스테이트 문수로 센트럴': 'HILLSTATE_MUNSURO_CENTRAL.json',
      '문수로 센트레빌 에듀리체': 'MUNSURO_CENTREVILLE_EDURICHE.json',
      '문수로 푸르지오 어반피스': 'MUNSURO_PRUGIO_URBANPEACE.json',
      '울산 호수공원 에일린의 뜰 1단지': 'LAKE_EILEENS_GARDEN_1.json',
      '울산 호수공원 에일린의 뜰 2단지': 'LAKE_EILEENS_GARDEN_2.json',
      '일광 노르웨이숲 오션포레': 'ILGWANG_NORWEGIAN_OCEANFORET.json',
      '더폴 울산신정': 'THEPOLE_ULSANSINJEONG.json',
      '써밋 리미티드 남천': 'SUMMIT_LIMITED_NAMCHEON.json',
      '베뉴브 해운대': 'VENUV_HAEUNDAE.json',
      '르엘 리버파크 센텀': 'LEEL_RIVERPARK_CENTUM.json',
      '두산위브더제니스 오션시티': 'DOOSANWEVETHEZENITH_OCEANCITY.json',
      '대연 디아이엘': 'DAEYEON_THEIL.json',
      '블랑 써밋 74': 'BlANC_SUMMIT_74.json',
      '양정 롯데캐슬 프론티엘': 'YANGJEONG_LOTTECASTLE_FRONTIEL.json',
      '드파인 광안': 'DEFINE_GWANGAN.json',
      '서면 써밋 더뉴': 'SEOMYEON_SUMMIT_THENEW.json',
      '태화강 센트럴 아이파크': 'TAEHWAGANG_CENTRAL_IPARK.json',
      '해링턴 마레': 'HARRINGTON_MARE.json',
      '힐스테이트 선암호수공원 1단지': 'HILLSTATE_SEONAMLAKEPARK_1.json',
      '힐스테이트 선암호수공원 2단지': 'HILLSTATE_SEONAMLAKEPARK_2.json',
      '울산 다운2지구 우미린 더 시그니처': 'ULSAN_DAUN2_WOOMILYNN_THE_SIGNATURE.json'
    };
    const BUNYANG_FILE_MAP = {};
    Object.keys(BUNYANG_FILE_MAP_RAW).forEach(k => {
      BUNYANG_FILE_MAP[normalizeName(k)] = BUNYANG_FILE_MAP_RAW[k];
    });
    const bunyangCache = {};

    /* 분양가 JSON 로드 (없으면 null) */
    async function fetchBunyangData(aptNm){
      const fname = BUNYANG_FILE_MAP[normalizeName(aptNm)];
      if (!fname) return null;
      if (bunyangCache[fname] !== undefined) return bunyangCache[fname];
      try {
        const res = await fetch(`../data/silv/${fname}`, { cache: 'no-store' });
        if (!res.ok) { bunyangCache[fname] = null; return null; }
        const json = await res.json();
        bunyangCache[fname] = json;
        return json;
      } catch (e) {
        bunyangCache[fname] = null;
        return null;
      }
    }

    /* 타입별 팔레트 (브역대신평초 9색 팔레트 차용) */
    const BUNYANG_PALETTE = ['#00E5CC','#FFB380','#FF99CC','#9966FF','#3399FF','#339900','#C0C0C0','#FF3333','#CC9966','#10b981','#fb923c'];

    /* [v22] 신스키마(동·호·층별 평면 레코드 배열) → 분양가 인덱스 구축
       입력: [{dong,ho,floor,type,area,price,status}, ...]
       - status==='분양' && price!=null 인 레코드만 분양가 계산에 사용
       - '분양 대상 아님'(조합원 매물 등 price=null)은 제외
       반환:
         areaList: [{area, rep, types:{타입:세대수}}]  (면적 오름차순, rep=세대 최다 타입)
         lookup:  Map. key=`${area4}|${floor}` → {used, kind, n, items:[{d,h,p}]}
                   · kind: 'official'(단일가, 정확) | 'average'(복수가, 세대수 가중평균)
                   · used: 세대수 가중평균(=Σprice/n). 단일가면 그 값 그대로
                   · items: 동·호·가격 배열 (동→호 순 정렬, 툴팁 상세용) */
    function buildBunyangIndex(data){
      if (!Array.isArray(data)) return null;
      const sold = data.filter(r => r && r.price != null && r.status === '분양');
      if (!sold.length) return null;

      /* [27_17] 최고층 — 층 구간 탭 생성용. '분양 대상 아님'(조합원 등)·미분양 포함 전체 레코드 기준
         (조합원 물량이 최상층일 수 있어 sold만으로는 최고층을 놓친다) */
      let maxFloor = 0;
      data.forEach(r => {
        const fl = Number(r && r.floor);
        if (Number.isFinite(fl) && fl > maxFloor) maxFloor = fl;
      });

      /* 면적별 타입 세대수 집계 → 대표 타입 */
      const areaTypes = {};                     /* area4 → {type: cnt} */
      sold.forEach(r => {
        const a = Number(r.area).toFixed(4);
        (areaTypes[a] ||= {});
        areaTypes[a][r.type] = (areaTypes[a][r.type] || 0) + 1;
      });
      const areaList = Object.keys(areaTypes)
        .map(a => Number(a))
        .sort((x,y) => x - y)
        .map(a => {
          const tcnt = areaTypes[a.toFixed(4)];
          let rep = null, max = -1;
          Object.keys(tcnt).forEach(t => { if (tcnt[t] > max) { max = tcnt[t]; rep = t; } });
          return { area: a, rep, types: tcnt };
        });

      /* (area4, floor) → 가격 후보 수집 */
      const bucket = {};                        /* key → [{d,h,p}] */
      sold.forEach(r => {
        const key = Number(r.area).toFixed(4) + '|' + r.floor;
        (bucket[key] ||= []).push({ d: r.dong, h: r.ho, p: r.price });
      });

      const lookup = new Map();
      Object.keys(bucket).forEach(key => {
        const items = bucket[key].slice().sort((a,b) => (a.d - b.d) || (a.h - b.h));
        const prices = items.map(it => it.p);
        const uniq = Array.from(new Set(prices));
        const used = Math.round(prices.reduce((s,v) => s+v, 0) / prices.length);  /* 세대수 가중평균 */
        lookup.set(key, {
          used,
          kind: uniq.length === 1 ? 'official' : 'average',
          n: items.length,
          items
        });
      });

      return { areaList, lookup, maxFloor };   /* [27_17] maxFloor 필드 추가 */
    }

    /* [v22] 분양가 조회 (면적 4자리 + 층) */
    function bunyangLookupByAreaFloor(idx, area, floor){
      if (!idx) return null;
      return idx.lookup.get(Number(area).toFixed(4) + '|' + floor) || null;
    }

    /* [27_17] 층 구간 동적 생성 (v22 자동탐지 폐기 → 최고층 기반 고정 구간)
       - 1~5층 / 6~9층 / 이후 10층 단위(10~19, 20~29, …)로 최고층까지 생성
       - 최고층 = max(분양 JSON 전체 레코드 층(idx.maxFloor), 실거래 층(txMaxFloor))
       - 마지막 밴드는 최고층에서 캡 (예: 46층 → 40~46층 / 25층 → 20~25층)
       - 시작=끝인 밴드는 'N층' 단독 표기
       - 키: 'all' + 'f{시작층}' (f 접두어 필수 — '1','6' 같은 정수형 키는 삽입 순서와 무관하게
         맨 앞으로 강제 정렬돼 'all'이 뒤로 밀린다. Object.keys 순회로 탭을 만들므로 순서 보존 필요) */
    function bunyangBuildFloorRanges(idx, txMaxFloor){
      let maxFloor = Math.max((idx && Number(idx.maxFloor)) || 0, Number(txMaxFloor) || 0);
      if (!(maxFloor >= 1)) maxFloor = 1;
      const ranges = { all: { label: '전체', test: f => true } };
      const bands = [[1, 5]];
      if (maxFloor >= 6) bands.push([6, 9]);
      for (let s = 10; s <= maxFloor; s += 10) bands.push([s, s + 9]);
      bands.forEach(([s, e0]) => {
        const e = Math.min(e0, maxFloor);
        if (e < s) return;
        ranges['f' + s] = { label: (s === e) ? `${s}층` : `${s}~${e}층`, test: f => f >= s && f <= e };
      });
      return ranges;
    }

    /* [v22] 실거래를 분양가 인덱스(면적+층)에 매핑 + 거래 정규화
       - 국토부 분양권 실거래는 (전용면적, 층)만 제공 → idx.lookup으로 분양가 조회
       - kind: 'official'(정확) | 'average'(복수가 평균) | 'missing'(분양가 데이터 없음)
       - missing도 결과에 포함(매매가 점은 찍되, 점선·세모 없이 표시 / 프리미엄 보기에선 제외)
       반환 레코드: { area, rep, f(층), a(매매가), kind, base(분양가 or null), n(세대수), items, d(날짜) } */
    function bunyangMapTrades(trades, idx){
      if (!idx) return [];
      /* 면적별 대표 타입 사전 + 유효 면적 집합 */
      const repOf = {};
      const validAreas = new Set();
      idx.areaList.forEach(a => { repOf[a.area.toFixed(4)] = a.rep; validAreas.add(a.area.toFixed(4)); });

      const out = [];
      trades.forEach(it => {
        if (it._source !== 'silv') return;            /* 분양권 거래만 */
        const area = Number(it.excluUseAr);
        const floor = Number(it.floor);
        const amount = parseInt(String(it.dealAmount).replace(/[^0-9]/g, ''), 10);
        if (!area || !floor || !amount) return;
        const a4 = area.toFixed(4);
        const yy = Number(it.dealYear), mm = Number(it.dealMonth), dd = Number(it.dealDay);
        const d = `${it.dealYear}-${String(it.dealMonth).padStart(2,'0')}-${String(it.dealDay).padStart(2,'0')}`;
        /* x: 시세 추이 차트와 동일한 좌표계 new Date(y, m-1, d) (로컬 자정) → 같은 거래 같은 위치 */
        const x = new Date(yy, mm - 1, dd).getTime();

        if (validAreas.has(a4)) {
          const rep = repOf[a4];
          const info = bunyangLookupByAreaFloor(idx, area, floor);
          if (info) {
            /* 분양가 특정/평균 가능 */
            out.push({ area, rep, f: floor, a: amount, kind: info.kind, base: info.used, n: info.n, items: info.items, d, x });
          } else {
            /* 면적은 분양됐지만 그 층엔 분양가 없음(조합원 층 등) → 분양가 데이터 없음 */
            out.push({ area, rep, f: floor, a: amount, kind: 'missing', base: null, n: 0, items: null, d, x });
          }
        } else {
          /* 분양 데이터에 아예 없는 면적 → 타입 미상, 분양가 데이터 없음 */
          out.push({ area, rep: `${Math.round(area)}㎡`, f: floor, a: amount, kind: 'missing', base: null, n: 0, items: null, d, x });
        }
      });
      return out;
    }

    // 비슷한 면적끼리 그룹핑 (±1 범위 클러스터링)
    function groupAreasByRounded(areaGroups) {
      const areas = Object.keys(areaGroups).map(Number).sort((a, b) => a - b);
      if (!areas.length) return {};

      const clusters = [];
      let current = [areas[0]];

      for (let i = 1; i < areas.length; i++) {
        // 현재 클러스터의 최솟값 기준 ±1 범위 내이면 같은 그룹
        if (areas[i] - current[0] <= 1.0) {
          current.push(areas[i]);
        } else {
          clusters.push(current);
          current = [areas[i]];
        }
      }
      clusters.push(current);

      const sorted = {};
      clusters.forEach(cluster => {
        // [v16] 면적 표기를 버림(floor)으로 통일 → 동별 가격 카드(areaData.area)와 일치
        const key = Math.floor(cluster[0]);
        sorted[key] = cluster.map(String);
        // 원본 areaGroups 키와 정확히 매칭
        sorted[key] = Object.keys(areaGroups)
          .filter(a => cluster.includes(Number(a)))
          .sort((a, b) => Number(a) - Number(b));
      });
      return sorted;
    }

    function isTradeInSliderRange(item) {
      if (!isTransactionMode) return false;
      const sDate = getDateFromIndex(currentMin);
      const eDate = getDateFromIndex(currentMax);
      const ym = item.dealYear * 100 + item.dealMonth;
      const sYm = sDate.y * 100 + sDate.m;
      const eYm = eDate.y * 100 + eDate.m;
      return ym >= sYm && ym <= eYm;
    }

    function buildSummarySeriesSpecs(groupLabels) {
      const specs = [];
      let exactStyleIdx = 0;
      // [index_26_5] 전체(group)가 SUMMARY_GROUP_PALETTE에서 (groupCount-1)개의 팔레트 색을 소비하므로
      //   (group 0은 민트=팔레트 외), 정확 면적 팔레트 시작점을 그만큼 뒤로 밀어 전체선과 색이 겹치지 않게 한다.
      const exactStyleOffset = Math.max(0, groupLabels.length - 1);

      groupLabels.forEach((groupLabel, groupIdx) => {
        const areaKeys = (summaryRoundedGroups[groupLabel] || []).slice();
        const totalCount = areaKeys.reduce((sum, area) => sum + ((summaryAreaGroups[area] || []).length), 0);

        // [index_26_5] 정수 면적대 전체선은 민트→팔레트 순으로 서로 다른 색을 쓰고, 선 패턴도 함께 적용한다.
        specs.push({
          key: `group:${groupLabel}`,
          label: `${groupLabel}㎡ 전체`,
          groupLabel: String(groupLabel),
          areaKeys,
          count: totalCount,
          isGroup: true,
          style: {
            color: getSummaryGroupColor(groupIdx),
            dash: SUMMARY_DASH_PATTERNS[groupIdx % SUMMARY_DASH_PATTERNS.length].slice()
          },
          seriesIdx: specs.length
        });

        // 정확 면적들은 면적대와 관계없이 하나의 전역 순서로 팔레트·선 패턴을 배정한다.
        // [index_26_5] exactStyleOffset만큼 앞쪽 색을 건너뛰어 전체선과 충돌을 피한다.
        areaKeys.forEach(area => {
          specs.push({
            key: `area:${area}`,
            label: `${area}㎡`,
            groupLabel: String(groupLabel),
            areaKeys: [String(area)],
            count: (summaryAreaGroups[area] || []).length,
            isGroup: false,
            style: getSummarySeriesStyle(exactStyleOffset + exactStyleIdx++),
            seriesIdx: specs.length
          });
        });
      });

      return specs;
    }

    // [index_26_9] 거래 단위 신규키 — loadCurrentRangeData의 makeTxKey와 필드 순서/정규화 완전 동일.
    //   요청(기본 선택 면적=신규거래 면적대)에서 summaryNewTxKeySet과 대조하려고 모듈 스코프로 1벌 둔다.
    function makeSummaryTxKey(item){
      return [
        normalizeName(item?.aptNm),
        valueTrim(item?.sggCd),
        valueTrim(item?.umdNm),
        valueTrim(item?.floor),
        valueTrim(item?.excluUseAr),
        normalizeDealAmount(item?.dealAmount),
        valueTrim(item?.dealYear),
        valueTrim(item?.dealMonth),
        valueTrim(item?.dealDay)
      ].join('|');
    }

    // [index_26_9] 시세 추이 카드 기본 선택 면적 결정.
    //   - 거래량 모드 ON이고 클릭 단지에 신규 거래가 있으면 그 거래의 면적이 속한 'OO㎡ 전체' 그룹을 기본 선택.
    //     (여러 면적대에서 신규 거래가 났으면 해당 그룹들을 모두 선택)
    //   - 그 외(거래량 OFF / 신규정보 없음)는 기존과 동일하게 가장 작은 면적대(첫 시리즈) 1개로 폴백.
    function computeDefaultSelectedSeries(seriesSpecs){
      const fallback = seriesSpecs.length ? [seriesSpecs[0].key] : [];
      if (!isTransactionMode) return fallback;
      if (!summaryNewTxKeySet || summaryNewTxKeySet.size === 0) return fallback;
      if (!Array.isArray(summaryAllTrades) || !summaryAllTrades.length) return fallback;

      const newAreaSet = new Set();
      summaryAllTrades.forEach(t => {
        if (summaryNewTxKeySet.has(makeSummaryTxKey(t))) {
          const a = String(t.excluUseAr || '').trim();
          if (a) newAreaSet.add(a);
        }
      });
      if (newAreaSet.size === 0) return fallback;

      const groupKeys = [];
      const seen = new Set();
      Object.keys(summaryRoundedGroups || {}).forEach(gl => {
        const areas = summaryRoundedGroups[gl] || [];
        if (areas.some(a => newAreaSet.has(String(a)))) {
          const key = `group:${gl}`;
          if (!seen.has(key)) { seen.add(key); groupKeys.push(key); }
        }
      });
      const valid = groupKeys.filter(k => seriesSpecs.some(s => s.key === k));
      return valid.length ? valid : fallback;
    }

    /* [27_32] 요청 3·4 — 면적 버튼 가로 스크롤바: 평소 숨김, 드래그/스크롤 중에만 잠깐 노출.
       scroll 시 'scrolling' 클래스 부여 → CSS가 스크롤바 노출, 700ms 무동작이면 제거. */
    function bindScrollbarAutoHide(el){
      if (!el) return;
      let hideTimer = null;
      el.addEventListener('scroll', () => {
        el.classList.add('scrolling');
        clearTimeout(hideTimer);
        hideTimer = setTimeout(() => el.classList.remove('scrolling'), 700);
      }, { passive: true });
    }

    function buildSummaryChartCard(groupLabels) {
      const card = document.createElement('div');
      card.className = 'dap-summary-card';

      const filterBox = document.createElement('div');
      filterBox.className = 'dap-summary-filter-box';

      // [index_26_1] 상위 카테고리 탭 없이 모든 면적 시리즈를 한 목록에 배치한다.
      const areaTabs = document.createElement('div');
      areaTabs.className = 'dap-summary-area-tabs';
      bindScrollbarAutoHide(areaTabs);   /* [27_32] 요청 3 — 드래그 중 스크롤바 잠깐 노출 */
      filterBox.appendChild(areaTabs);
      // [index_26_6] 면적 행 펼치기/접기 토글(행 4개 이상일 때만 노출). 기본은 접힘(3행).
      const areaRowsToggle = document.createElement('div');
      areaRowsToggle.className = 'dap-summary-rows-toggle';
      areaRowsToggle.style.display = 'none';
      filterBox.appendChild(areaRowsToggle);
      card.appendChild(filterBox);

      /* [27_25] 시세 차트와 층 분포를 한 행에 배치 (좌: 시세 차트 / 우: 층 분포 + 세로 층 슬라이더) */
      const chartRow = document.createElement('div');
      chartRow.className = 'dap-summary-chart-row';

      const chartWrap = document.createElement('div');
      chartWrap.className = 'dap-summary-chart-wrap';
      chartRow.appendChild(chartWrap);

      const floorHost = document.createElement('div');
      floorHost.className = 'dap-summary-floor-slot';
      chartRow.appendChild(floorHost);
      card.appendChild(chartRow);

      const xrangeHost = document.createElement('div');
      xrangeHost.className = 'dap-summary-xrange-slot';
      card.appendChild(xrangeHost);

      // 거래 테이블 섹션
      const tableSection = document.createElement('div');
      tableSection.className = 'dap-summary-table-section';

      const tableHeader = document.createElement('div');
      tableHeader.className = 'dap-summary-table-header';
      const tableTitle = document.createElement('h3');
      tableTitle.textContent = '기간 내 거래 내역';
      tableHeader.appendChild(tableTitle);
      const periodBadge = document.createElement('span');
      periodBadge.className = 'period-badge';
      tableHeader.appendChild(periodBadge);
      tableSection.appendChild(tableHeader);

      const tableWrap = document.createElement('div');
      tableWrap.className = 'dap-table-wrap';
      const table = document.createElement('table');
      table.className = 'dap-summary-table';

      const thead = document.createElement('thead');
      thead.innerHTML = '<tr><th>거래일</th><th>금액 (만원)</th><th>층</th><th>전용면적</th></tr>';
      table.appendChild(thead);

      const tbody = document.createElement('tbody');
      table.appendChild(tbody);
      tableWrap.appendChild(table);
      tableSection.appendChild(tableWrap);
      // [index_26_9] 거래량 OFF 거래표 '더보기/감추기' 토글 자리(거래량 모드 경로는 미사용).
      const txMoreHost = document.createElement('div');
      txMoreHost.className = 'dap-summary-tx-more-host';
      tableSection.appendChild(txMoreHost);
      card.appendChild(tableSection);

      const seriesSpecs = buildSummarySeriesSpecs(groupLabels);
      const selectedSeries = new Set(computeDefaultSelectedSeries(seriesSpecs)); // [index_26_9] 신규거래 면적대 우선(없으면 최소 면적대)
      const allAreaKeys = Array.from(new Set(seriesSpecs.flatMap(spec => spec.areaKeys)));

      const ref = {
        card,
        groupLabels,
        areaTabs,
        areaRowsToggle,           // [index_26_6] 펼치기/접기 토글 DOM
        areaRowsCollapsed: true,  // [index_26_6] 기본 접힘(3행만 노출)
        chartWrap,
        chartRow,                   // [27_25] 차트+층분포 행
        xrangeHost,
        floorHost,                  // [27_19] 층 분포/조절 슬롯 ([27_25] 차트 우측으로 이동)
        xrangeRefs: null,           // [27_28] 기간 슬라이더 DOM 참조 (축 정렬용)
        floorState: null,           // [27_19] {fMin,fMax,maxFloor} — 재렌더 간 유지, null=층 정보 없음
        floorUI: null,              // [27_19] 층 패널 DOM 참조 (buildSummaryFloorPanel에서 세팅)
        tableSection,
        tableTitle,
        periodBadge,
        tbody,
        txMoreHost,                 // [index_26_9] 거래량 OFF 거래표 더보기/감추기 토글 호스트
        txTableExpanded: false,     // [index_26_9] 더보기 펼침 상태(기본 접힘=최근 1개월)
        areas: allAreaKeys,
        seriesSpecs,
        selectedSeries,
        seriesButtonMap: new Map(),
        chart: null,
        xrangeState: { presetMonths: 60, curMin: 0, curMax: 1 }
      };

      // [index_26_6] 토글 클릭: 접힘 상태만 뒤집고 라벨/클래스 갱신은 updateAreaRowsToggle에 위임.
      areaRowsToggle.addEventListener('click', () => {
        ref.areaRowsCollapsed = !ref.areaRowsCollapsed;
        updateAreaRowsToggle(ref);
      });

      return ref;
    }

    function destroySummaryExplorerChart(ref) {
      const oldChart = ref && ref.chart;
      if (!oldChart) return;

      const si = summaryChartInstances.indexOf(oldChart);
      if (si >= 0) summaryChartInstances.splice(si, 1);
      const di = dongAreaCharts.indexOf(oldChart);
      if (di >= 0) dongAreaCharts.splice(di, 1);

      try { oldChart.destroy(); } catch (e) {}
      ref.chart = null;
    }

    function summaryItemTime(item) {
      if (!item) return NaN;
      const y = Number(item.dealYear);
      const m = Number(item.dealMonth);
      const d = Number(item.dealDay);
      if (!y || !m || !d) return NaN;
      return new Date(y, m - 1, d).getTime();
    }

    function countSummarySpecInRange(spec, minX, maxX, ref) {
      if (!spec || !Number.isFinite(minX) || !Number.isFinite(maxX)) return spec ? spec.count : 0;
      let count = 0;
      spec.areaKeys.forEach(area => {
        (summaryAreaGroups[area] || []).forEach(item => {
          if (ref && !summaryFloorPass(item, ref)) return;   /* [27_19] 기간∩층 */
          const x = summaryItemTime(item);
          if (Number.isFinite(x) && x >= minX && x <= maxX) count++;
        });
      });
      return count;
    }

    function updateSummaryPeriodCounts(ref, minX, maxX) {
      if (!ref || !ref.seriesButtonMap) return;
      ref.seriesSpecs.forEach(spec => {
        const btnRefs = ref.seriesButtonMap.get(spec.key);
        if (!btnRefs || !btnRefs.countEl) return;
        const count = countSummarySpecInRange(spec, minX, maxX, ref);   /* [27_19] 층 필터 반영 */
        btnRefs.countEl.textContent = `${count}건`;
        btnRefs.button.dataset.periodCount = String(count);
      });
    }

    /* =========================================================
       [27_19] 시세 추이 층 필터 + 층 히트맵(면적대별 아파트동)
       - 층 상태: ref.floorState = {fMin,fMax,maxFloor}. 전체(1~최고층)면 무필터(층값 없는 거래 포함, 기존 동작 동일).
       - 최고층: 현재 단지 거래 데이터(summaryAllTrades)의 max(floor) — 별도 출처 확보 전 임시 기준.
       - 차트 반영: 각 dot 데이터셋의 원본을 _allItems에 1회 보존 → 층 통과분으로 _sortedItems/data/점 스타일
         배열을 교체(툴팁·거래량 강조가 _sortedItems[dataIndex] 인덱스 정합에 의존하므로 반드시 함께 교체),
         MA 추세선은 chart._computeMonthlyAvg(필터본)로 재계산. _dataMinX/_dataMaxX(기간 슬라이더 도메인)는
         전체 데이터 기준 그대로 둔다(층 드래그로 기간바가 흔들리지 않게).
       - 히트맵: 면적대(groupLabel)별 '아파트동' 1개씩 — 켜진 spec이 있는 그룹만 생성. 같은 그룹 안에서
         전체/개별 다중 선택은 아이템 참조 dedup 합집합. 세로=층(아래 1층), 행 색=기간 내 거래 건수 강도.
         층 선택 범위 밖 행은 디밍. ========================================================= */

    function summaryComputeMaxFloor(){
      let mf = 0;
      (summaryAllTrades || []).forEach(it => {
        const f = Number(it && it.floor);
        if (Number.isFinite(f) && f > mf) mf = f;
      });
      return mf;
    }

    function summaryFloorPass(item, ref){
      const fs = ref && ref.floorState;
      if (!fs) return true;
      if (fs.fMin <= 1 && fs.fMax >= fs.maxFloor) return true;   /* 전체 = 무필터 (층값 없는 거래 포함) */
      const f = Number(item && item.floor);
      return Number.isFinite(f) && f >= fs.fMin && f <= fs.fMax;
    }

    function summaryFloorActive(ref){
      const fs = ref && ref.floorState;
      return !!fs && (fs.fMin > 1 || fs.fMax < fs.maxFloor);
    }

    /* 거래표 제목에 붙는 층 필터 표시 (전체면 빈 문자열) */
    function summaryFloorSuffix(ref){
      if (!summaryFloorActive(ref)) return '';
      const fs = ref.floorState;
      return (fs.fMin === fs.fMax) ? ` · ${fs.fMin}층` : ` · ${fs.fMin}~${fs.fMax}층`;
    }

    /* 층 필터를 차트 데이터셋에 적용 (점+추세선 재구성) + 건수/히트맵 갱신 */
    function applySummaryFloorFilter(ref){
      const chart = ref && ref.chart;
      if (!chart || !chart._areaDatasetMap) return;
      const avgFn = chart._computeMonthlyAvg;
      chart._areaDatasetMap.forEach(({ dotIdx, maIdx }) => {
        const dot = chart.data.datasets[dotIdx];
        const ma = chart.data.datasets[maIdx];
        if (!dot) return;
        if (!dot._allItems) dot._allItems = dot._sortedItems || [];   /* 원본 1회 보존 */
        const items = dot._allItems.filter(it => summaryFloorPass(it, ref));
        dot._sortedItems = items;
        dot.data = items.map(it => ({
          x: new Date(it.dealYear, it.dealMonth - 1, it.dealDay).getTime(),
          y: parseInt(String(it.dealAmount).replace(/,/g, ''))
        }));
        /* per-point 스타일 배열 재구성 (buildSummaryChart 생성 규칙과 동일) */
        const isGroup = !!dot._isGroupSummary;
        const color = dot._seriesColor || '#00E5CC';
        const baseRadius = isGroup ? 3 : 3.5;
        const inactiveAlpha = isGroup ? '40' : '55';
        const hl = items.map(it => isTradeInSliderRange(it));
        dot.backgroundColor = hl.map(h => h ? color : color + inactiveAlpha);
        dot.pointBackgroundColor = hl.map(h => h ? color : color + inactiveAlpha);
        dot.pointRadius = hl.map(h => h ? 6 : baseRadius);
        dot.pointBorderColor = hl.map(h => h ? '#fff' : 'transparent');
        dot.pointBorderWidth = hl.map(h => h ? 2 : 0);
        if (ma && typeof avgFn === 'function') ma.data = avgFn(items);
      });
      chart.update('none');
      if (Number.isFinite(chart._selectedMinX) && Number.isFinite(chart._selectedMaxX)) {
        updateSummaryPeriodCounts(ref, chart._selectedMinX, chart._selectedMaxX);
      }
      redrawSummaryFloorHeatmap(ref);
    }

    /* 층 분포 곡선 그룹: 켜진 spec이 있는 면적대별로 아이템 합집합(참조 dedup)
       [27_25] 시세 차트와 동일한 시리즈 색상 부여 — 그룹(전체)선이 켜져 있으면 그 색,
       아니면 켜진 개별 면적 중 첫 번째 색 (spec.style.color = 차트 데이터셋과 같은 소스) */
    function computeSummaryFloorHeatmapGroups(ref){
      const groups = [];
      if (!ref || !ref.seriesSpecs) return groups;
      (ref.groupLabels || []).forEach(gl => {
        const specs = ref.seriesSpecs.filter(s => s.groupLabel === String(gl) && ref.selectedSeries.has(s.key));
        if (!specs.length) return;
        const seen = new Set();
        const items = [];
        specs.forEach(sp => sp.areaKeys.forEach(a => (summaryAreaGroups[a] || []).forEach(it => {
          if (!seen.has(it)) { seen.add(it); items.push(it); }
        })));
        const rep = specs.find(s => s.isGroup) || specs[0];
        groups.push({ label: `${gl}㎡`, items, color: (rep && rep.style && rep.style.color) || '#00E5CC' });
      });
      return groups;
    }

    /* [27_20] 히트맵 통계 — 색 강도·배경 곡선 비율을 '선택 층 구간 안에서' 재계산.
       예: 10층 단지 층별 거래 [5,5,7,10,17,18,16,12,7,3]에서 4~8층 선택 시 분모=73(구간 합)
       → 4층 14%·5층 23%·6층 25%·7층 22%·8층 16% (전체 기준 10~18%를 구간 기준으로 재정규화)
       - built: 동별 층 건수 / total: 전 동 합산 층 건수(배경 곡선용)
       - gMax: 선택 구간 내 최대 건수(셀 색 분모) / selSum: 구간 총 건수(곡선 백분율 분모)
       - ratio[f]: 구간 내 층별 비율 / ratioMax: 구간 내 최대 비율(곡선 가로폭 정규화) */
    function computeSummaryFloorStats(groups, maxFloor, fMin, fMax, pMin, pMax){
      const built = groups.map(g => {
        const cnt = new Array(maxFloor + 1).fill(0);
        g.items.forEach(it => {
          const f = Number(it.floor);
          if (!Number.isFinite(f) || f < 1 || f > maxFloor) return;
          const x = summaryItemTime(it);
          if (!Number.isFinite(x) || x < pMin || x > pMax) return;
          cnt[f]++;
        });
        return { label: g.label, cnt };
      });
      const total = new Array(maxFloor + 1).fill(0);
      built.forEach(b => { for (let f = 1; f <= maxFloor; f++) total[f] += b.cnt[f]; });
      let gMax = 0, selSum = 0;
      for (let f = fMin; f <= fMax; f++){
        selSum += total[f];
        built.forEach(b => { if (b.cnt[f] > gMax) gMax = b.cnt[f]; });
      }
      const ratio = new Array(maxFloor + 1).fill(0);
      let ratioMax = 0;
      if (selSum > 0) for (let f = fMin; f <= fMax; f++){
        ratio[f] = total[f] / selSum;
        if (ratio[f] > ratioMax) ratioMax = ratio[f];
      }
      return { built, total, gMax, selSum, ratio, ratioMax };
    }

    /* 히트맵 캔버스 렌더 (기간=chart._selectedMinX/MaxX, 층 선택 밖 행 디밍) */
    function redrawSummaryFloorHeatmap(ref){
      const ui = ref && ref.floorUI;
      const fs = ref && ref.floorState;
      if (!ui || !fs || !ui.canvas) return;
      if (!summaryFloorPanelOpen) return;   /* [27_29] 숨김 상태에선 렌더 생략 (0폭 슬롯으로 캔버스가 잘못 잡히는 것도 방지) */
      const ctx = ui.canvas.getContext && ui.canvas.getContext('2d');
      if (!ctx) return;

      const maxFloor = fs.maxFloor;
      const chart = ref.chart;
      /* [27_25] 이 캔버스는 시세 차트 캔버스와 같은 행·같은 상하 여백(8px)에 놓이고 높이도 맞추므로,
         Chart.js의 chartArea(top/bottom)를 그대로 층 축 범위로 쓰면 두 차트의 플롯 밴드가 정렬된다 */
      const slotH = (ref.floorHost && ref.floorHost.clientHeight) || 240;
      /* [27_26] 폭 기준은 반드시 '슬롯' — canvas.clientWidth를 기준으로 삼으면, 절대배치 replaced 요소는
         width:auto일 때 비트맵 크기가 곧 화면 폭이 되므로 redraw마다 dpr배로 폭이 불어난다(되먹임).
         style.width를 함께 명시해 고리를 끊는다 */
      const TRACK_W = 20;
      const slotW = (ref.floorHost && ref.floorHost.clientWidth) || 82;
      const cssW = Math.max(36, slotW - TRACK_W);
      const cssH = Math.max(80, slotH - 16);
      const dpr = (window.devicePixelRatio || 1);
      ui.canvas.width = Math.round(cssW * dpr);
      ui.canvas.height = Math.round(cssH * dpr);
      ui.canvas.style.width = cssW + 'px';
      ui.canvas.style.height = cssH + 'px';
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.clearRect(0, 0, cssW, cssH);

      const ca = chart && chart.chartArea;
      const plotTop = (ca && Number.isFinite(ca.top)) ? ca.top : 12;
      const plotBot = (ca && Number.isFinite(ca.bottom)) ? ca.bottom : (cssH - 22);
      const plotH = Math.max(40, plotBot - plotTop);

      /* 우측 세로 슬라이더를 플롯 밴드에 정렬 (슬롯 패딩 8px 보정) */
      ui.geom = { plotTop, plotH };
      if (ui.track) { ui.track.style.top = (8 + plotTop) + 'px'; ui.track.style.height = plotH + 'px'; }
      syncSummaryFloorHandles(ref);

      let pMin = -Infinity, pMax = Infinity;
      if (chart && Number.isFinite(chart._selectedMinX) && Number.isFinite(chart._selectedMaxX)) {
        pMin = chart._selectedMinX; pMax = chart._selectedMaxX;
      }

      const rowH = plotH / maxFloor;
      const yOfTop = f => plotTop + plotH - f * rowH;      /* 층 f 행의 위쪽 y */
      const x0 = 1, plotW = cssW - 2;                      /* 기준선(0 위치) ~ 우측 한계 */

      /* 패널 이름 — 시세 차트의 x축 날짜 라벨과 같은 높이 줄 */
      ctx.font = '700 9px Pretendard Variable, Pretendard, sans-serif';
      ctx.fillStyle = '#5c6662';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('층 분포', cssW / 2, Math.min(cssH - 5, plotBot + 12));

      const groups = computeSummaryFloorHeatmapGroups(ref);
      if (!groups.length) {
        ctx.fillStyle = '#b3bcb8';
        ctx.font = '600 9px Pretendard Variable, Pretendard, sans-serif';
        ctx.fillText('면적 선택', cssW / 2, plotTop + plotH / 2);
        return;
      }

      const stats = computeSummaryFloorStats(groups, maxFloor, fs.fMin, fs.fMax, pMin, pMax);
      const built = stats.built;

      /* 선택 층 구간의 상·하한 층 라벨 (배지 역할 겸함) */
      const bandTop = yOfTop(fs.fMax), bandH = (fs.fMax - fs.fMin + 1) * rowH;
      /* [27_27] 선택 구간 음영(fillRect) 폐지 — 범위는 우측 슬라이더와 층 라벨로 충분 */

      /* 좌측 기준선(0 위치) — 곡선들의 공통 기준 */
      ctx.strokeStyle = 'rgba(0,0,0,0.10)';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(x0, bandTop);
      ctx.lineTo(x0, bandTop + bandH);
      ctx.stroke();

      /* [27_27] 층 분포 막대그래프 — 층마다 가로 막대, 길이 = 그 층 거래 비율.
         면적대가 여럿이면 층 행을 면적대 수만큼 나눠 나란히 배치(겹침·가림 없음), 색은 시세 차트 시리즈 색.
         비율 분모 = 그 면적대의 선택 층 구간 총 건수(재정규화), 가로 앵커 = 그 면적대의 전 층 최대 비율 고정
         (전체 선택 시 최대 막대 ≈ 폭 62%, 구간을 좁히면 우측 가장자리까지 늘어남·초과 시 클램프) */
      const nSeries = Math.max(1, built.length);
      built.forEach((b, i) => {
        let fullSum = 0, fullMax = 0, selSum = 0;
        for (let f = 1; f <= maxFloor; f++){
          fullSum += b.cnt[f];
          if (b.cnt[f] > fullMax) fullMax = b.cnt[f];
          if (f >= fs.fMin && f <= fs.fMax) selSum += b.cnt[f];
        }
        if (!fullSum || !fullMax || !selSum) return;   /* 이 면적대는 표시할 거래 없음 → 생략 */
        const color = (groups[i] && groups[i].color) || '#00E5CC';
        const K = (plotW * 0.62) / (fullMax / fullSum);
        const subH = rowH / nSeries;
        const barH = Math.max(1, subH - (nSeries > 1 ? 0.4 : 1));
        ctx.fillStyle = color;
        for (let f = fs.fMin; f <= fs.fMax; f++){
          if (!b.cnt[f]) continue;
          const w = Math.min(plotW, (b.cnt[f] / selSum) * K);
          if (w <= 0) continue;
          ctx.fillRect(x0, yOfTop(f) + i * subH + (subH - barH) / 2, Math.max(1, w), barH);
        }
      });

      /* [27_28] 라벨을 캔버스 우측(층 조절바 버튼 바로 왼쪽)으로 이동 — 좌측에 두면 막대에 깔려 가린다.
         막대가 라벨 자리까지 길어져도 읽히도록 흰 배경 칩을 깔고 그린다 */
      const drawFloorLabel = (txt, y, baseline) => {
        /* [27_30] 배경 칩 제거 — 막대를 가리지 않도록 투명. 텍스트만 우측에 얹는다 */
        ctx.font = '700 9px Pretendard Variable, Pretendard, sans-serif';
        ctx.fillStyle = '#7a847f';
        ctx.textAlign = 'right';
        ctx.textBaseline = baseline;
        ctx.fillText(txt, cssW - 2, y);
      };
      if (bandH >= 24 && fs.fMin !== fs.fMax) {
        drawFloorLabel(fs.fMax + '층', bandTop + 1, 'top');
        drawFloorLabel(fs.fMin + '층', bandTop + bandH - 1, 'bottom');
      } else {
        drawFloorLabel(fs.fMin === fs.fMax ? `${fs.fMin}층` : `${fs.fMin}~${fs.fMax}층`,
                       bandTop + bandH / 2, 'middle');
      }
    }

    /* [27_28] 기간 슬라이더를 시세 차트 x축(플롯 영역)에 맞춰 위치·폭 정렬.
       차트 캔버스와 xrange 블록은 같은 카드 컨텐츠 좌측 기준을 공유하므로 chartArea.left를 그대로 offset으로 쓴다 */
    function alignSummaryXRangeToAxis(ref){
      const chart = ref && ref.chart;
      const refs = ref && ref.xrangeRefs;
      if (!chart || !refs || !refs.slider) return;
      if (!refs.block || !refs.block.classList.contains('xrange-axis-aligned')) return;   /* [27_30] 시세추이 전용 */
      const ca = chart.chartArea;
      if (!ca || !Number.isFinite(ca.left) || !Number.isFinite(ca.right)) return;
      refs.slider.style.width = Math.max(40, ca.right - ca.left) + 'px';
      refs.slider.style.marginLeft = ca.left + 'px';
      refs.slider.style.marginRight = '0';
    }

    /* 핸들/선택영역을 현재 floorState에 맞춰 배치 (트랙은 플롯 밴드에 정렬되어 있으므로 상대 좌표) */
    function syncSummaryFloorHandles(ref){
      const ui = ref && ref.floorUI;
      const fs = ref && ref.floorState;
      if (!ui || !fs || !ui.geom) return;
      const { plotH } = ui.geom;
      const yCenter = f => plotH * (1 - (f - 0.5) / fs.maxFloor);
      const yMin = yCenter(fs.fMin), yMax = yCenter(fs.fMax);
      if (ui.hMin) ui.hMin.style.top = yMin + 'px';
      if (ui.hMax) ui.hMax.style.top = yMax + 'px';
      if (ui.sel) { ui.sel.style.top = yMax + 'px'; ui.sel.style.height = Math.max(0, yMin - yMax) + 'px'; }
      /* [27_25] 선택 범위 표기는 캔버스 안 층 라벨이 담당 → 배지 폐지. 리셋 버튼은 필터 중일 때만 노출 */
      if (ui.reset) ui.reset.hidden = !summaryFloorActive(ref);
    }

    /* 층 패널 DOM 생성 + 세로 드래그 바인딩. floorState 없으면(층 정보 無) 슬롯 비움 */
    function buildSummaryFloorPanel(ref){
      if (!ref || !ref.floorHost) return;
      ref.floorHost.innerHTML = '';
      ref.floorUI = null;
      const toggleBtn = ref.xrangeRefs && ref.xrangeRefs.floorToggle;   /* [27_30] 기간 바 위 토글 */
      if (toggleBtn) toggleBtn.hidden = !ref.floorState;   /* [27_29] 층 정보 없는 단지에선 버튼도 숨김 */
      if (!ref.floorState) { ref.floorHost.style.display = 'none'; return; }   /* [27_25] 층 정보 없으면 슬롯 자체를 접어 차트가 폭을 다 쓰게 */
      ref.floorHost.style.display = summaryFloorPanelOpen ? '' : 'none';       /* [27_29] 기본 숨김 */

      /* [27_25] 차트 우측 슬롯에 직접 배치 — 캔버스(분포) + 세로 층 슬라이더 + 리셋 버튼.
         제목/선택범위는 캔버스 안에 그리므로 헤더·배지 DOM 없음 */
      const panel = ref.floorHost;
      panel.innerHTML = `
        <canvas class="dap-floor-canvas"></canvas>
        <button type="button" class="dap-floor-reset" hidden>전체</button>
        <div class="dap-floor-track">
          <div class="dap-floor-track-line"></div>
          <div class="dap-floor-sel"></div>
          <div class="dap-floor-handle" data-h="min"></div>
          <div class="dap-floor-handle" data-h="max"></div>
        </div>`;

      const ui = {
        panel,
        canvas: panel.querySelector('.dap-floor-canvas'),
        track: panel.querySelector('.dap-floor-track'),
        sel: panel.querySelector('.dap-floor-sel'),
        hMin: panel.querySelector('.dap-floor-handle[data-h="min"]'),
        hMax: panel.querySelector('.dap-floor-handle[data-h="max"]'),
        reset: panel.querySelector('.dap-floor-reset'),
        geom: null
      };
      ref.floorUI = ui;

      /* 리셋: 전체 층 복귀 */
      ui.reset.addEventListener('click', () => {
        const fs = ref.floorState;
        if (!fs || (fs.fMin === 1 && fs.fMax === fs.maxFloor)) return;
        fs.fMin = 1; fs.fMax = fs.maxFloor;
        applySummaryFloorFilter(ref);
        updateSummaryHighlight();                          /* 거래표(모드별 경로) 갱신 */
      });

      /* 세로 드래그 (Pointer Events, rAF 코얼레싱) */
      const posToFloor = (clientY) => {
        const fs = ref.floorState;
        const rect = ui.track.getBoundingClientRect();
        const h = rect.height || 1;
        let r = (clientY - rect.top) / h;
        if (r < 0) r = 0; if (r > 1) r = 1;
        let f = Math.round(fs.maxFloor * (1 - r) + 0.5);
        if (f < 1) f = 1; if (f > fs.maxFloor) f = fs.maxFloor;
        return f;
      };
      let raf = 0;
      const scheduleApply = () => {
        if (raf) return;
        raf = requestAnimationFrame(() => { raf = 0; applySummaryFloorFilter(ref); });
      };
      const bindHandle = (el, isMin) => {
        el.addEventListener('pointerdown', (e) => {
          e.preventDefault();
          el.setPointerCapture && el.setPointerCapture(e.pointerId);
          const move = (ev) => {
            const fs = ref.floorState;
            const f = posToFloor(ev.clientY);
            let changed = false;
            if (isMin) { const v = Math.min(f, fs.fMax); if (v !== fs.fMin) { fs.fMin = v; changed = true; } }
            else       { const v = Math.max(f, fs.fMin); if (v !== fs.fMax) { fs.fMax = v; changed = true; } }
            if (changed) { syncSummaryFloorHandles(ref); scheduleApply(); }
          };
          const up = () => {
            el.removeEventListener('pointermove', move);
            el.removeEventListener('pointerup', up);
            el.removeEventListener('pointercancel', up);
            updateSummaryHighlight();                      /* 드래그 종료 시 거래표 1회 갱신 */
          };
          el.addEventListener('pointermove', move);
          el.addEventListener('pointerup', up);
          el.addEventListener('pointercancel', up);
        });
      };
      bindHandle(ui.hMin, true);
      bindHandle(ui.hMax, false);

      /* 첫 레이아웃 이후 실폭으로 렌더. [27_25] chartArea는 차트 첫 draw 뒤에 확정되므로 rAF 2회 —
         1회차에 chartArea가 없으면 폴백 여백으로 그려지고, 2회차에서 플롯 밴드에 정확히 정렬된다 */
      requestAnimationFrame(() => {
        redrawSummaryFloorHeatmap(ref);
        requestAnimationFrame(() => redrawSummaryFloorHeatmap(ref));
      });
    }

    // [index_26_5] 면적 버튼 고정폭을 실제 콘텐츠에서 산정한다.
    //   - 활성 상태의 굵은 글씨(700/11.5px) 라벨 + 표시 가능한 최대 건수(전체 거래건수, 600/10px)를 측정,
    //     고정요소(좌우 패딩 22 + 색상점 10 + 컬럼 간격 12)와 여유(8)를 더해 가장 넓은 버튼에 맞춘다.
    //   - 기간 슬라이더로 줄어든 건수는 항상 전체건수 이하라 폭 재계산 없이도 '전체' 글자가 잘리지 않는다.
    //   - 측정 실패(폰트 미로딩/canvas 미지원) 시 기존 118px(.dap-summary-area-tabs CSS 기본값) 이상으로만 동작.
    const SUMMARY_BTN_FONT_FAMILY = "'Pretendard Variable','Pretendard','Malgun Gothic',sans-serif";
    function measureSummaryButtonWidth(ref) {
      const specs = (ref && ref.seriesSpecs) || [];
      if (!specs.length) return 118;
      const canvas = measureSummaryButtonWidth._canvas
        || (measureSummaryButtonWidth._canvas = document.createElement('canvas'));
      const ctx = canvas.getContext('2d');
      if (!ctx) return 118;
      const FIXED = 22 + 10 + 12; // 좌우 패딩 + 색상점 + 컬럼 간격 2개
      const SAFETY = 8;           // 측정 오차/서브픽셀 여유
      let maxNeed = 118;          // 기존 고정폭 미만으로는 줄이지 않는다
      specs.forEach(spec => {
        ctx.font = `700 11.5px ${SUMMARY_BTN_FONT_FAMILY}`;   // 활성(굵게) 라벨이 가장 넓다
        const labelW = ctx.measureText(String(spec.label)).width;
        ctx.font = `600 10px ${SUMMARY_BTN_FONT_FAMILY}`;     // 건수는 표시 가능한 최댓값(전체건수) 기준
        const cntW = ctx.measureText(`${spec.count}건`).width;
        const need = FIXED + Math.ceil(labelW) + Math.ceil(cntW) + SAFETY;
        if (need > maxNeed) maxNeed = need;
      });
      return maxNeed;
    }

    // [index_26_6] 면적 행 펼치기/접기 토글 화살표(동별 테이블 토글과 동일한 SVG 삼각형).
    const SUMMARY_ROWS_ARROW_SVG = '<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><polygon points="1,3.5 9,3.5 5,6.5" fill="currentColor"/></svg>';

    // [index_26_6] 면적 행 토글 상태/라벨 갱신. 행이 3개 이하이면 토글을 숨기고 전체를 노출한다.
    function updateAreaRowsToggle(ref) {
      const btn = ref && ref.areaRowsToggle;
      if (!btn || !ref.areaTabs) return;
      const ROW_LIMIT = 3;
      const total = (ref.groupLabels || []).length;
      if (total <= ROW_LIMIT) {
        btn.style.display = 'none';
        ref.areaTabs.classList.remove('dap-rows-collapsed');
        return;
      }
      const collapsed = !!ref.areaRowsCollapsed;
      ref.areaTabs.classList.toggle('dap-rows-collapsed', collapsed);
      btn.classList.toggle('expanded', !collapsed);
      btn.style.display = 'flex';
      const hidden = total - ROW_LIMIT;
      btn.innerHTML = collapsed
        ? `<span>면적 ${hidden}행 더 보기</span><span class="toggle-arrow">${SUMMARY_ROWS_ARROW_SVG}</span>`
        : `<span>접기</span><span class="toggle-arrow">${SUMMARY_ROWS_ARROW_SVG}</span>`;
    }

    function renderSummaryAreaButtons(ref) {
      if (!ref) return;
      ref.areaTabs.innerHTML = '';
      ref.seriesButtonMap = new Map();

      // [index_26_3] 면적대별 행은 유지하되 모든 행이 같은 열 너비를 공유한다.
      const maxColumns = Math.max(1, ...ref.groupLabels.map(groupLabel =>
        ref.seriesSpecs.filter(spec => spec.groupLabel === String(groupLabel)).length
      ));
      ref.areaTabs.style.setProperty('--summary-column-count', String(maxColumns));
      // [index_26_5] 콘텐츠 기준 동적 버튼 폭 (활성 굵은 글씨/3자리 이상 건수에서도 '전체'가 …으로 안 잘리게)
      ref.areaTabs.style.setProperty('--summary-button-width', measureSummaryButtonWidth(ref) + 'px');

      ref.groupLabels.forEach(groupLabel => {
        const row = document.createElement('div');
        row.className = 'dap-summary-area-row';
        row.dataset.group = String(groupLabel);

        ref.seriesSpecs
          .filter(spec => spec.groupLabel === String(groupLabel))
          .forEach(spec => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'dap-summary-area-btn';
            btn.dataset.seriesKey = spec.key;
            const isActive = ref.selectedSeries.has(spec.key);
            btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
            btn.classList.toggle('active', isActive);
            btn.innerHTML = `${buildSummaryColorDot(spec.style.color)}<span>${spec.label}</span><span class="cnt">${spec.count}건</span>`;

            const countEl = btn.querySelector('.cnt');
            ref.seriesButtonMap.set(spec.key, { button: btn, countEl });

            btn.addEventListener('click', () => {
              const isOn = ref.selectedSeries.has(spec.key);
              // [index_26_6] 마지막 1개 유지 가드 제거 → 모든 버튼 해제 가능(빈 차트 허용).
              if (isOn) ref.selectedSeries.delete(spec.key);
              else ref.selectedSeries.add(spec.key);
              btn.classList.toggle('active', !isOn);
              btn.setAttribute('aria-pressed', !isOn ? 'true' : 'false');
              applySummaryAreaVisibility(ref);
            });
            row.appendChild(btn);
          });

        ref.areaTabs.appendChild(row);
      });

      updateAreaRowsToggle(ref); // [index_26_6] 행 수에 따라 펼치기/접기 토글 노출·라벨 갱신
    }

    function applySummaryAreaVisibility(ref) {
      const chart = ref && ref.chart;
      if (!chart || !chart._areaDatasetMap) return;

      chart._areaDatasetMap.forEach(({ key, dotIdx, maIdx }) => {
        const visible = ref.selectedSeries.has(key);
        chart.data.datasets[dotIdx].hidden = !visible;
        chart.data.datasets[maIdx].hidden = !visible;
        chart.getDatasetMeta(dotIdx).hidden = visible ? null : true;
        chart.getDatasetMeta(maIdx).hidden = visible ? null : true;
      });
      chart.update('none');
      updateSummaryHighlight();
      redrawSummaryFloorHeatmap(ref);   /* [27_19] 면적 토글 → 히트맵 동 추가/제거 */
    }

    function renderSummaryExplorer(ref) {
      if (!ref || !ref.seriesSpecs.length) return;

      renderSummaryAreaButtons(ref);
      destroySummaryExplorerChart(ref);

      ref.chartWrap.innerHTML = '';
      const canvas = document.createElement('canvas');
      canvas.height = 224;   /* [27_20] 랩 높이 240px(80%)에 맞춘 폴백값 (기존 280) */
      ref.chartWrap.appendChild(canvas);

      const chart = buildSummaryChart(ref.seriesSpecs, summaryAreaGroups, canvas, ref.selectedSeries);
      ref.chart = chart;
      if (chart) { chart._floorRef = ref; summaryChartInstances.push(chart); }   /* [27_30] afterLayout 정렬 훅용 역참조 */

      /* [27_19] 층 필터 상태 초기화/보정 (재렌더 간 유지, 최고층은 거래 데이터 기준·변동 시 클램프) */
      const maxFloor = summaryComputeMaxFloor();
      if (maxFloor >= 1) {
        if (!ref.floorState) {
          ref.floorState = { fMin: 1, fMax: maxFloor, maxFloor };
        } else {
          ref.floorState.maxFloor = maxFloor;
          ref.floorState.fMin = Math.min(Math.max(1, ref.floorState.fMin), maxFloor);
          ref.floorState.fMax = Math.min(Math.max(ref.floorState.fMin, ref.floorState.fMax), maxFloor);
        }
      } else {
        ref.floorState = null;                   /* 층 정보 없는 단지 → 층 UI 미노출·무필터 */
      }

      /* [27_30] xrange(+토글)를 층 패널보다 먼저 생성 — buildSummaryFloorPanel이 ref.xrangeRefs.floorToggle을
         참조해 버튼 노출을 정하므로 순서가 중요 */
      ref.xrangeHost.innerHTML = '';
      const xrangeRefs = createXRangeSliderDOM();
      xrangeRefs.block.classList.add('xrange-axis-aligned');   /* [27_28] 시세 추이 전용 변형(배지 숨김·축 정렬) */
      ref.xrangeRefs = xrangeRefs;
      /* [27_30] '층 분포' 토글: 기간 바 위 우측. 상태 반영 + 클릭 핸들러 (헤더에서 이곳으로 이동) */
      if (xrangeRefs.floorToggle) {
        xrangeRefs.floorToggle.classList.toggle('on', summaryFloorPanelOpen);
        xrangeRefs.floorToggle.addEventListener('click', () => {
          summaryFloorPanelOpen = !summaryFloorPanelOpen;
          applySummaryFloorPanelVisibility();
        });
      }

      buildSummaryFloorPanel(ref);               /* 기간 바인딩 전에 만들어 첫 apply에서 히트맵이 그려지게 */

      ref.xrangeHost.appendChild(xrangeRefs.block);
      if (chart) {
        chart._onXRangeChange = (minX, maxX) => {
          updateSummaryPeriodCounts(ref, minX, maxX);
          redrawSummaryFloorHeatmap(ref);        /* [27_19] 기간 변경 → 히트맵 재집계 */
          alignSummaryXRangeToAxis(ref);         /* [27_28] 차트 재레이아웃 대비 */
        };
        bindChartXRangeSlider(chart, xrangeRefs, ref.xrangeState);
      }
      /* [27_28] chartArea는 차트 첫 draw 뒤 확정 → rAF 2회로 폭·위치 정렬 (층 패널 유무와 무관하게 실행) */
      requestAnimationFrame(() => {
        alignSummaryXRangeToAxis(ref);
        requestAnimationFrame(() => alignSummaryXRangeToAxis(ref));
      });
      if (summaryFloorActive(ref)) applySummaryFloorFilter(ref);   /* [27_19] 유지된 층 필터를 새 차트에 재적용 */

      updateSummaryHighlight();
    }

    function buildSummaryChart(seriesSpecs, areaGroups, canvas, visibleSeriesSet) {
      if (typeof Chart === 'undefined') return null;
      if (!seriesSpecs.length) return null;

      // 일별 날짜 → 숫자 변환 (linear scale용)
      function dateToNum(y, m, d) {
        return new Date(y, m - 1, d).getTime();
      }

      // 월별 실평균 계산 (MA 없음 - tension Bezier로 시각적 스무딩)
      function computeMonthlyAvg(sortedItems) {
        if (!sortedItems.length) return [];
        const monthMap = {};
        sortedItems.forEach(item => {
          const key = item.dealYear * 100 + item.dealMonth;
          if (!monthMap[key]) monthMap[key] = { y: 0, m: item.dealMonth, yr: item.dealYear, cnt: 0 };
          monthMap[key].y += parseInt(String(item.dealAmount).replace(/,/g, ''));
          monthMap[key].cnt++;
        });
        return Object.keys(monthMap).sort((a, b) => a - b).map(key => {
          const { y, m, yr, cnt } = monthMap[key];
          return { x: dateToNum(yr, m, 15), y: y / cnt };
        });
      }

      const visibleSet = visibleSeriesSet instanceof Set ? visibleSeriesSet : new Set();
      const allDatasets = [];
      const areaDatasetMap = [];
      let globalMinX = Infinity, globalMaxX = -Infinity;

      seriesSpecs.forEach((spec, seriesIdx) => {
        const items = [];
        spec.areaKeys.forEach(area => {
          (areaGroups[area] || []).forEach(item => items.push(item));
        });
        if (!items.length) return;

        const sortedItems = items.sort((a, b) => {
          const da = a.dealYear * 10000 + a.dealMonth * 100 + a.dealDay;
          const db = b.dealYear * 10000 + b.dealMonth * 100 + b.dealDay;
          return da - db;
        });

        const points = sortedItems.map(item => {
          const xVal = dateToNum(item.dealYear, item.dealMonth, item.dealDay);
          if (xVal < globalMinX) globalMinX = xVal;
          if (xVal > globalMaxX) globalMaxX = xVal;
          return { x: xVal, y: parseInt(String(item.dealAmount).replace(/,/g, '')) };
        });

        const color = spec.style.color;
        const highlighted = sortedItems.map(item => isTradeInSliderRange(item));
        const baseRadius = spec.isGroup ? 3 : 3.5;
        const inactiveAlpha = spec.isGroup ? '40' : '55';
        const isVisible = visibleSet.has(spec.key);

        const dotDatasetIdx = allDatasets.length;
        allDatasets.push({
          label: spec.label,
          data: points,
          borderColor: 'transparent',
          backgroundColor: highlighted.map(h => h ? color : color + inactiveAlpha),
          fill: false,
          showLine: false,
          pointRadius: highlighted.map(h => h ? 6 : baseRadius),
          pointHoverRadius: 7,
          pointBackgroundColor: highlighted.map(h => h ? color : color + inactiveAlpha),
          pointBorderColor: highlighted.map(h => h ? '#fff' : 'transparent'),
          pointBorderWidth: highlighted.map(h => h ? 2 : 0),
          pointHoverBackgroundColor: color,
          pointHoverBorderColor: '#fff',
          pointHoverBorderWidth: 2,
          hidden: !isVisible,
          _isSummaryDots: true,
          _areaIdx: seriesIdx,
          _sortedItems: sortedItems,
          _seriesColor: color,
          _seriesKey: spec.key,
          _isGroupSummary: spec.isGroup
        });

        const maPoints = computeMonthlyAvg(sortedItems);
        const maDatasetIdx = allDatasets.length;
        allDatasets.push({
          label: spec.label + ' MA',
          data: maPoints,
          borderColor: lineBorderColorFn,
          backgroundColor: 'transparent',
          fill: false,
          showLine: true,
          pointRadius: 0,
          pointHoverRadius: 0,
          tension: 0.5,
          cubicInterpolationMode: 'monotone',
          borderWidth: 2,
          borderDash: spec.style.dash,
          hidden: !isVisible,
          _origColor: color,
          _seriesColor: color,
          _isSummaryMA: true,
          _areaIdx: seriesIdx,
          _seriesKey: spec.key,
          _isGroupSummary: spec.isGroup
        });

        areaDatasetMap.push({
          key: spec.key,
          label: spec.label,
          dotIdx: dotDatasetIdx,
          maIdx: maDatasetIdx,
          areaIdx: seriesIdx,
          isGroup: spec.isGroup
        });
      });

      if (!allDatasets.length || !Number.isFinite(globalMinX) || !Number.isFinite(globalMaxX)) return null;

      function formatDateTick(val) {
        const d = new Date(val);
        return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}`;
      }

      const rangeSpan = Math.max(1, globalMaxX - globalMinX);
      const chart = new Chart(canvas, {
        type: 'scatter',
        data: { datasets: allDatasets },
        plugins: [{
          /* [27_30] chartArea가 확정/변경될 때마다 기간 슬라이더를 x축 폭에 정렬.
             초기 진입(첫 화면)에도 rAF 타이밍에 의존하지 않고 정확히 맞춰진다 — 층 분포를 한 번도
             안 열어도 기간바가 처음부터 x축 폭으로 확장됨(3번 버그 수정). chart._floorRef는
             renderSummaryExplorer에서 세팅 */
          id: 'summaryXRangeAlign',
          afterLayout(c){ if (c._floorRef) alignSummaryXRangeToAxis(c._floorRef); }
        }],
        options: {
          animation: false, //26년 6월 15일 GPT 수정
          responsive: true,
          maintainAspectRatio: false,
          interaction: { mode: 'nearest', intersect: false },
          layout: {
            padding: { right: 4, left: 0 }
          },
          plugins: {
            legend: {
              // 상단의 평탄화된 면적 버튼이 범례와 토글을 겸한다.
              display: false,
              position: 'top',
              labels: {
                usePointStyle: false,
                boxWidth: 28,
                boxHeight: 3,
                padding: 10,
                font: { size: 11, weight: '600' },
                generateLabels: (chart) => {
                  return areaDatasetMap.map(({ label, maIdx }) => {
                    const maDs = chart.data.datasets[maIdx];
                    const isVisible = chart.isDatasetVisible(maIdx);
                    const midColor = maDs._origColor || '#888';
                    return {
                      text: label,
                      fillStyle: midColor,
                      strokeStyle: midColor,
                      lineWidth: 0,
                      lineDash: maDs.borderDash || [],
                      hidden: !isVisible,
                      datasetIndex: maIdx,
                      fontColor: !isVisible ? '#bbb' : midColor
                    };
                  });
                }
              },
              onClick: (evt, legendItem, legend) => {
                const ci = legend.chart;
                const maIdx = legendItem.datasetIndex;
                const match = areaDatasetMap.find(m => m.maIdx === maIdx);
                if (!match) return;
                const isVisible = ci.isDatasetVisible(match.maIdx);
                ci.getDatasetMeta(match.maIdx).hidden = isVisible ? true : null;
                ci.getDatasetMeta(match.dotIdx).hidden = isVisible ? true : null;
                ci.update();
              }
            },
            tooltip: {
              enabled: false,
              external: externalTooltipHandler,
              backgroundColor: function(ctx) {
                const item = ctx.tooltipItems && ctx.tooltipItems[0];
                if (!item) return 'rgba(0,0,0,0.82)';
                const ds = allDatasets[item.datasetIndex];
                const mid = ds && (ds._seriesColor || ds._origColor || ds._allColor);
                if (!mid) return 'rgba(0,0,0,0.82)';
                const r = parseInt(mid.slice(1,3), 16);
                const g = parseInt(mid.slice(3,5), 16);
                const b = parseInt(mid.slice(5,7), 16);
                return `rgba(${r},${g},${b},0.92)`;
              },
              titleColor: function(ctx) {
                const item = ctx.tooltipItems && ctx.tooltipItems[0];
                if (!item) return '#fff';
                const ds = allDatasets[item.datasetIndex];
                const mid = ds && (ds._seriesColor || ds._origColor || ds._allColor);
                if (!mid) return '#fff';
                const r = parseInt(mid.slice(1,3), 16);
                const g = parseInt(mid.slice(3,5), 16);
                const b = parseInt(mid.slice(5,7), 16);
                return ((r*299 + g*587 + b*114) / 1000) > 140 ? '#000' : '#fff';
              },
              bodyColor: function(ctx) {
                const item = ctx.tooltipItems && ctx.tooltipItems[0];
                if (!item) return '#fff';
                const ds = allDatasets[item.datasetIndex];
                const mid = ds && (ds._seriesColor || ds._origColor || ds._allColor);
                if (!mid) return '#fff';
                const r = parseInt(mid.slice(1,3), 16);
                const g = parseInt(mid.slice(3,5), 16);
                const b = parseInt(mid.slice(5,7), 16);
                return ((r*299 + g*587 + b*114) / 1000) > 140 ? '#000' : '#fff';
              },
              titleFont: { size: 12, weight: '700' },
              bodyFont: { size: 12, weight: '500' },
              padding: 10,
              cornerRadius: 8,
              filter: (tooltipItem) => {
                const ds = allDatasets[tooltipItem.datasetIndex];
                return ds && ds._isSummaryDots;
              },
              callbacks: {
                title: (items) => {
                  if (!items.length) return '';
                  const d = new Date(items[0].parsed.x);
                  return `${d.getFullYear()}.${String(d.getMonth()+1).padStart(2,'0')}.${String(d.getDate()).padStart(2,'0')}`;
                },
                label: (ctx) => {
                  const v = ctx.parsed.y;
                  const eok = (v / 10000).toFixed(1);
                  const ds = allDatasets[ctx.datasetIndex];
                  const item = ds && ds._sortedItems && ds._sortedItems[ctx.dataIndex];
                  const floor = item && item.floor;
                  return floor != null && floor !== '' ? ` ${eok}억 · ${floor}층` : ` ${eok}억`;
                }
              }
            }
          },
          scales: {
            x: {
              type: 'linear',
              ticks: {
                maxRotation: 0,               /* [27_20] 분양가 차트처럼 수평 날짜 (기존 45도 비스듬) */
                minRotation: 0,
                autoSkip: true,
                maxTicksLimit: 7,             /* [27_20] 수평 라벨 폭 고려 — 분양가 COMMON_X와 동일 개수 */
                font: { size: 10 },
                callback: formatDateTick
              },
              grid: { display: false },
              min: globalMinX - rangeSpan * 0.02,
              max: globalMaxX + rangeSpan * 0.02
            },
            y: {
              beginAtZero: false,
              grid: { color: 'rgba(0,0,0,0.035)', lineWidth: 0.5, drawBorder: false },   /* [27_31] 요청 3 — 더 얇고 희미하게 */
              ticks: {
                callback: (value) => {
                  const eok = value / 10000;
                  return eok.toFixed(1) + '억';
                },
                font: { size: 10 }
              }
            }
          }
        }
      });

      chart._areaDatasetMap = areaDatasetMap;
      chart._computeMonthlyAvg = computeMonthlyAvg;   /* [27_19] 층 필터 시 MA 재계산용 노출 */
      chart._dataMinX = globalMinX;
      chart._dataMaxX = globalMaxX;
      dongAreaCharts.push(chart);
      bindGlobalTooltipCloser();
      return chart;
    }

    function updateSummaryHighlight() {
      summaryCardRefs.forEach(ref => {
        const { chart, tableSection, periodBadge, tbody, seriesSpecs, selectedSeries, tableTitle } = ref;

        if (chart && chart._areaDatasetMap) {
          chart._areaDatasetMap.forEach(({ dotIdx }) => {
            const ds = chart.data.datasets[dotIdx];
            if (!ds || !ds._isSummaryDots) return;
            const sortedItems = ds._sortedItems || [];
            const isGroup = !!ds._isGroupSummary;
            const colorStr = ds._seriesColor || '#00E5CC';
            const baseRadius = isGroup ? 3 : 3.5;
            const inactiveAlpha = isGroup ? '40' : '55';

            ds.pointRadius = sortedItems.map(item => isTradeInSliderRange(item) ? 6 : baseRadius);
            ds.pointBackgroundColor = sortedItems.map(item =>
              isTradeInSliderRange(item) ? colorStr : colorStr + inactiveAlpha
            );
            ds.pointBorderColor = sortedItems.map(item =>
              isTradeInSliderRange(item) ? '#fff' : 'transparent'
            );
            ds.pointBorderWidth = sortedItems.map(item =>
              isTradeInSliderRange(item) ? 2 : 0
            );
          });
          chart.update('none');
        }

        // 거래량 버튼과 연계: 현재 켜진 모든 시리즈가 대표하는 정확 면적의 합집합을 표에 표시한다.
        if (tableSection && tbody && periodBadge) {
          if (ref.txMoreHost) ref.txMoreHost.innerHTML = ''; // [index_26_9] 모드 전환 시 비휘발 더보기 토글 잔상 제거
          if (isTransactionMode) {
            tableSection.classList.add('active');

            const sDate = getDateFromIndex(currentMin);
            const eDate = getDateFromIndex(currentMax);
            periodBadge.textContent = `${sDate.y}.${String(sDate.m).padStart(2, '0')} ~ ${eDate.y}.${String(eDate.m).padStart(2, '0')}`;

            const selectedSpecs = (seriesSpecs || []).filter(spec => selectedSeries && selectedSeries.has(spec.key));
            const areaSet = new Set();
            selectedSpecs.forEach(spec => spec.areaKeys.forEach(area => areaSet.add(String(area))));

            if (tableTitle) {
              if (selectedSpecs.length === 0) tableTitle.textContent = '기간 내 거래 내역'; // [index_26_6] 전체 해제 상태
              else if (selectedSpecs.length === 1) tableTitle.textContent = `기간 내 거래 내역 · ${selectedSpecs[0].label}` + summaryFloorSuffix(ref);
              else tableTitle.textContent = `기간 내 거래 내역 · ${selectedSpecs.length}개 비교` + summaryFloorSuffix(ref);
            }

            const inRange = summaryAllTrades.filter(item => {
              const a = String(item.excluUseAr || '').trim();
              return areaSet.has(a) && isTradeInSliderRange(item) && summaryFloorPass(item, ref);   /* [27_19] 층 필터 */
            });
            inRange.sort((a, b) => {
              const da = a.dealYear * 10000 + a.dealMonth * 100 + a.dealDay;
              const db = b.dealYear * 10000 + b.dealMonth * 100 + b.dealDay;
              return db - da;
            });

            if (inRange.length === 0) {
              tbody.innerHTML = '<tr><td colspan="4" class="dap-summary-no-data">해당 기간에 거래 내역이 없습니다.</td></tr>';
            } else {
              tbody.innerHTML = '';
              const makeTxKeyLocal = (it) => [
                normalizeName(it?.aptNm),
                valueTrim(it?.sggCd),
                valueTrim(it?.umdNm),
                valueTrim(it?.floor),
                valueTrim(it?.excluUseAr),
                normalizeDealAmount(it?.dealAmount),
                valueTrim(it?.dealYear),
                valueTrim(it?.dealMonth),
                valueTrim(it?.dealDay)
              ].join('|');
              inRange.forEach(item => {
                const tr = document.createElement('tr');
                const dateStr = `${item.dealYear}.${String(item.dealMonth).padStart(2, '0')}.${String(item.dealDay).padStart(2, '0')}`;
                const isNewTx = summaryNewTxKeySet.has(makeTxKeyLocal(item));
                const newBadge = isNewTx ? '<span class="dap-tx-new-badge">NEW</span>' : '';
                tr.innerHTML = `
                  <td>${newBadge}${dateStr}</td>
                  <td class="price-cell">${dongAreaFmt(parseInt(String(item.dealAmount).replace(/,/g, '')))}</td>
                  <td class="floor-cell">${item.floor}층</td>
                  <td class="area-cell">${item.excluUseAr}㎡</td>
                `;
                tbody.appendChild(tr);
              });
            }
          } else {
            ref.txTableExpanded = false; // [index_26_9] 면적 변경/모드 전환 시 1개월 접힘으로 복귀
            renderNonVolumeTradeTable(ref);
          }
        }
      });
    }

    // [index_26_9] N개월 전 같은 일자(비교용 임계값). 말일 보정은 하지 않음(임계값이라 충분).
    function monthsBeforeYmd(y, m, d, months){
      let ny = y, nm = m - months;
      while (nm <= 0) { nm += 12; ny -= 1; }
      return { y: ny, m: nm, d: d };
    }

    // [index_26_9] 거래량 모드 OFF(지도에서 단지만 클릭)일 때도 시세 추이 아래에 거래표를 노출.
    //   - 선택된 면적(시리즈)의 거래만 최신순. 기본은 최근 1개월치만, '더보기'로 전체, '감추기'로 다시 1개월.
    //   - 거래량 모드 표 경로(updateSummaryHighlight의 isTransactionMode 분기)는 건드리지 않는 별도 경로.
    function renderNonVolumeTradeTable(ref){
      if (!ref) return;
      const { tableSection, tbody, periodBadge, tableTitle, seriesSpecs, selectedSeries, txMoreHost } = ref;
      if (!tableSection || !tbody) return;

      const selectedSpecs = (seriesSpecs || []).filter(spec => selectedSeries && selectedSeries.has(spec.key));
      const areaSet = new Set();
      selectedSpecs.forEach(spec => spec.areaKeys.forEach(area => areaSet.add(String(area))));

      // 면적 0개 선택 → 표 숨김(빈 차트와 동일 취급)
      if (areaSet.size === 0) {
        tableSection.classList.remove('active');
        if (txMoreHost) txMoreHost.innerHTML = '';
        return;
      }
      tableSection.classList.add('active');

      if (tableTitle) {
        if (selectedSpecs.length === 1) tableTitle.textContent = `기간 내 거래 내역 · ${selectedSpecs[0].label}` + summaryFloorSuffix(ref);
        else tableTitle.textContent = `기간 내 거래 내역 · ${selectedSpecs.length}개 비교` + summaryFloorSuffix(ref);
      }

      const pool = (summaryAllTrades || [])
        .filter(item => areaSet.has(String(item.excluUseAr || '').trim()) && summaryFloorPass(item, ref));   /* [27_19] 층 필터 */
      pool.sort((a, b) => {
        const da = a.dealYear * 10000 + a.dealMonth * 100 + a.dealDay;
        const db = b.dealYear * 10000 + b.dealMonth * 100 + b.dealDay;
        return db - da;
      });

      if (pool.length === 0) {
        if (periodBadge) periodBadge.textContent = '';
        tbody.innerHTML = '<tr><td colspan="4" class="dap-summary-no-data">거래 내역이 없습니다.</td></tr>';
        if (txMoreHost) txMoreHost.innerHTML = '';
        return;
      }

      // 최근 1개월 컷오프: 가장 최근 거래일 기준 1개월 전(같은 일자) 이상
      const latest = pool[0];
      const cut = monthsBeforeYmd(latest.dealYear, latest.dealMonth, latest.dealDay, 1);
      const cutNum = cut.y * 10000 + cut.m * 100 + cut.d;
      const within = pool.filter(it => (it.dealYear * 10000 + it.dealMonth * 100 + it.dealDay) >= cutNum);
      const moreN = pool.length - within.length;
      const expanded = !!ref.txTableExpanded;
      const rows = expanded ? pool : within;

      // 기간 배지: 현재 표시 중인 행의 연-월 범위
      if (periodBadge) {
        const fmtYm = (it) => `${it.dealYear}.${String(it.dealMonth).padStart(2, '0')}`;
        const newest = rows[0], oldest = rows[rows.length - 1];
        periodBadge.textContent = (newest && oldest)
          ? (fmtYm(newest) === fmtYm(oldest) ? fmtYm(newest) : `${fmtYm(oldest)} ~ ${fmtYm(newest)}`)
          : '';
      }

      // 행 렌더 (거래량 표와 동일 포맷: 거래일/금액/층/전용면적)
      tbody.innerHTML = '';
      rows.forEach(item => {
        const tr = document.createElement('tr');
        const dateStr = `${item.dealYear}.${String(item.dealMonth).padStart(2, '0')}.${String(item.dealDay).padStart(2, '0')}`;
        tr.innerHTML = `
          <td>${dateStr}</td>
          <td class="price-cell">${dongAreaFmt(parseInt(String(item.dealAmount).replace(/,/g, '')))}</td>
          <td class="floor-cell">${item.floor}층</td>
          <td class="area-cell">${item.excluUseAr}㎡</td>
        `;
        tbody.appendChild(tr);
      });

      // 더보기/감추기 토글 (동별표 .dap-table-toggle 스타일 재사용)
      if (txMoreHost) {
        txMoreHost.innerHTML = '';
        if (moreN > 0) {
          const TOGGLE_ARROW_SVG = '<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><polygon points="1,3.5 9,3.5 5,6.5" fill="currentColor"/></svg>';
          const btn = document.createElement('div');
          btn.className = 'dap-table-toggle';
          if (expanded) btn.classList.add('expanded');
          btn.innerHTML = expanded
            ? `<span>감추기</span><span class="toggle-arrow">${TOGGLE_ARROW_SVG}</span>`
            : `<span>이전 거래 ${moreN}건 더보기</span><span class="toggle-arrow">${TOGGLE_ARROW_SVG}</span>`;
          btn.addEventListener('click', () => {
            ref.txTableExpanded = !ref.txTableExpanded;
            renderNonVolumeTradeTable(ref);
          });
          txMoreHost.appendChild(btn);
        }
      }
    }

    /* =========================================================
       [v22] 분양권 분양가/프리미엄 섹션 렌더러 (신스키마: 면적+층 기준)
       - idx: buildBunyangIndex 결과 {areaList, lookup}
       - trades: fetchAllTradesForApt 결과
       - 면적을 기준 단위로 사용(국토부 실거래가 면적만 제공). 타입은 표시용 라벨(rep).
       - 마커: official=꽉찬 세모 ▲ / average=속 빈 세모 △ / missing=세모·점선 없음
       - 툴팁: 시세 추이와 동일한 알파/경계선/그림자, 면적 타입색 배경, 동·호 상세(스크롤)
       ========================================================= */
    function renderBunyangSection(idx, trades, containerEl){
      const TX = bunyangMapTrades(trades, idx);
      if (!TX.length) return false;   /* 매칭 거래 없으면 섹션 생략 */

      /* [27_17] 층 구간: 실거래 최고층도 반영 (분양 JSON 밖 층 거래가 있어도 탭에서 새지 않게) */
      const txMaxFloor = TX.reduce((m, t) => Math.max(m, Number(t.f) || 0), 0);
      const FLOOR_RANGES = bunyangBuildFloorRanges(idx, txMaxFloor);
      /* 면적 목록: 실제 거래가 있는 면적만, 분양가표(면적 오름차순) 순서 유지 */
      const txAreaSet = new Set(TX.map(t => t.area.toFixed(4)));
      const ALL_AREAS = idx.areaList.map(a => a.area).filter(a => txAreaSet.has(a.toFixed(4)));
      /* 면적 → 대표 타입 라벨 */
      const REP = {};
      idx.areaList.forEach(a => { REP[a.area.toFixed(4)] = a.rep; });
      /* 거래는 있으나 분양 데이터에 없는 면적(missing-only)도 범례에 포함 */
      TX.forEach(t => {
        const k = t.area.toFixed(4);
        if (!REP[k]) REP[k] = t.rep;
        if (!ALL_AREAS.some(a => a.toFixed(4) === k)) ALL_AREAS.push(t.area);
      });
      ALL_AREAS.sort((x,y) => x - y);
      /* 면적별 색상 (표시 순서 기준) */
      const COLOR = {};
      ALL_AREAS.forEach((a, i) => { COLOR[a.toFixed(4)] = BUNYANG_PALETTE[i % BUNYANG_PALETTE.length]; });

      /* [30_4] 시세 추이와 색 통일. 위 기본 배정을 그대로 둔 채 덮어쓰기만 하므로
         BUNYANG_COLOR_SOURCE='own'으로 되돌리면 즉시 기존 동작으로 복구된다. */
      if (BUNYANG_COLOR_SOURCE === 'summary') {
        const summaryAreaColors = buildSummaryExactAreaColorMap();
        const usedColors = new Set();
        const unmatchedKeys = [];

        ALL_AREAS.forEach(a => {
          const k = a.toFixed(4);
          const c = summaryAreaColors[k];
          if (c) { COLOR[k] = c; usedColors.add(c); }
          else { unmatchedKeys.push(k); }
        });

        /* 시세 추이에 없는 면적(분양가표에만 있는 경우 등)은 아직 쓰지 않은 색으로 채워 중복을 피한다 */
        let pi = 0;
        unmatchedKeys.forEach(k => {
          let guard = 0;
          while (usedColors.has(BUNYANG_PALETTE[pi % BUNYANG_PALETTE.length]) && guard++ < BUNYANG_PALETTE.length) pi++;
          const c = BUNYANG_PALETTE[pi % BUNYANG_PALETTE.length];
          COLOR[k] = c;
          usedColors.add(c);
          pi++;
        });
      }
      const areaKey = t => t.area.toFixed(4);
      const labelOf = a => REP[a.toFixed(4)] || `${Math.round(a)}㎡`;

      /* 상태 */
      let curView = 'base';            /* 'base' | 'prem' */
      const selFloors = new Set();      /* [27_18] 선택된 층 구간 키 집합(다중 선택). 빈 집합 = '전체' */
      const hidden = new Set();         /* 숨긴 면적키(area4) */

      const fmtSigned = v => (v>=0?'+':'') + v.toLocaleString();
      /* 프리미엄 통계: missing(분양가 없음)은 평균 계산에서 제외 */
      const statsOf = arr => {
        const p = arr.filter(t => t.kind !== 'missing' && t.base != null).map(t => t.a - t.base);
        if (!p.length) return null;
        return { avg: Math.round(p.reduce((s,v)=>s+v,0)/p.length), n: p.length };
      };
      /* [27_18] 층 필터: 선택 구간(다중)의 합집합 통과. 빈 집합 = 전체
         (호출부 renderTypeLegend/visibleTX/buildBase/buildPrem는 무수정 — 반환 형태 동일하게 새 배열) */
      const filteredTX = () => {
        if (!selFloors.size) return TX.slice();
        const keys = [...selFloors];
        return TX.filter(t => keys.some(k => FLOOR_RANGES[k].test(t.f)));
      };
      const visibleTX = () => filteredTX().filter(t => !hidden.has(areaKey(t)));

      const xTickFmt = v => {
        const dt = new Date(v);
        return `${dt.getFullYear()}.${String(dt.getMonth()+1).padStart(2,'0')}`;
      };
      /* [A안] x축 범위를 '시세 추이' 차트와 동일하게 맞춤 → 같은 거래가 같은 화면 위치에 표시.
         1순위: 같은 화면에 이미 그려진 시세 추이 종합 차트의 원본 데이터 범위(_dataMinX/_dataMaxX) 재사용
         2순위(폴백): 전체 trades의 실거래일로 직접 계산 (시세 추이와 동일한 new Date(y,m-1,d) 좌표계)
         pad도 시세 추이와 동일: (max-min)*0.02 */
      const xRange = () => {
        let min = Infinity, max = -Infinity;
        /* 1순위: 시세 추이 종합 차트 범위 (dongAreaCharts 중 _dataMinX 보유 차트) */
        if (Array.isArray(dongAreaCharts)) {
          dongAreaCharts.forEach(c => {
            if (c && typeof c._dataMinX === 'number' && typeof c._dataMaxX === 'number') {
              if (c._dataMinX < min) min = c._dataMinX;
              if (c._dataMaxX > max) max = c._dataMaxX;
            }
          });
        }
        /* 2순위: 전체 trades 실거래일로 계산 (시세 추이와 동일 좌표계) */
        if (!(min < max)) {
          (trades || []).forEach(it => {
            if (it._source !== 'silv') return;
            const y = Number(it.dealYear), m = Number(it.dealMonth), d = Number(it.dealDay);
            if (!y || !m || !d) return;
            const x = new Date(y, m - 1, d).getTime();
            if (x < min) min = x;
            if (x > max) max = x;
          });
        }
        /* 최후 폴백: TX 기준 */
        if (!(min < max)) {
          const ds = TX.map(t => t.x);
          min = Math.min(...ds); max = Math.max(...ds);
        }
        const pad = (max - min) * 0.02 || 86400000 * 15;
        return { min: min - pad, max: max + pad, rawMin: min, rawMax: max };
      };
      const COMMON_X = () => {
        const r = xRange();
        return {
          type:'linear', min:r.min, max:r.max,
          ticks:{ callback: xTickFmt, maxTicksLimit: 7, color:'#888780', font:{size:10} },
          grid:{ color:'rgba(136,135,128,0.10)' }
        };
      };

      /* DOM 골격 */
      const wrap = document.createElement('div');
      wrap.className = 'bunyang-wrap';
      wrap.innerHTML = `
        <div class="bunyang-card">
          <div class="bunyang-filter-box">
            <div class="bunyang-floor-tabs"></div>
            <div class="bunyang-type-legend"></div>
          </div>
          <div class="bunyang-card-top">
            <div class="bunyang-card-hdr">
              <span class="bunyang-vcount"></span>
            </div>
            <div class="bunyang-view-toggle-wrap">
              <button type="button" class="bunyang-view-switch" data-view="base">
                <span class="vs-label vs-left">분양가</span>
                <span class="vs-track"><span class="vs-knob"></span></span>
                <span class="vs-label vs-right">프리미엄</span>
              </button>
            </div>
          </div>
          <div class="bunyang-desc"></div>
          <div class="bunyang-chart-wrap"><canvas></canvas></div>
          <div class="bunyang-shape-legend">
            <span><span class="ci"></span>매매가</span>
            <span><span class="tr tr-full"></span>분양가(정확)</span>
            <span><span class="tr tr-open"></span>분양가(평균)</span>
            <span><span class="da"></span>프리미엄</span>
          </div>
          <div class="bunyang-xrange-slot"></div>
        </div>`;
      containerEl.appendChild(wrap);

      const elFloorTabs = wrap.querySelector('.bunyang-floor-tabs');
      const elViewSwitch = wrap.querySelector('.bunyang-view-switch');
      const elDesc      = wrap.querySelector('.bunyang-desc');
      const elVCount    = wrap.querySelector('.bunyang-vcount');
      const elShapeLeg  = wrap.querySelector('.bunyang-shape-legend');
      const elTypeLeg   = wrap.querySelector('.bunyang-type-legend');
      bindScrollbarAutoHide(elTypeLeg);   /* [27_32] 요청 4 — 드래그 중 스크롤바 잠깐 노출 */
      const elXrangeSlot = wrap.querySelector('.bunyang-xrange-slot');
      const canvas      = wrap.querySelector('canvas');

      let chart = null;

      /* [v21] 기간 조정 슬라이더 (시세 추이와 동일한 xrange UI 재사용)
         - 차트는 재생성되므로 선택 비율(xrMin/xrMax)을 위젯 상태로 보존 */
      let xrMin = 0, xrMax = 1;                 /* 0~1 비율 */
      const xr = createXRangeSliderDOM();
      elXrangeSlot.appendChild(xr.block);
      /* 슬라이더 기준 = x축 범위(시세 추이와 동일)의 pad 미포함 원본 */
      const _xr0 = xRange();
      const xrDataMin = _xr0.rawMin;
      const xrDataMax = _xr0.rawMax;
      const xrSpan = xrDataMax - xrDataMin;
      const xrMonthsBetween = (a, b) => {
        const da = new Date(a), db = new Date(b);
        return (db.getFullYear() - da.getFullYear()) * 12 + (db.getMonth() - da.getMonth());
      };
      const xrFmtYM = ts => {
        const d = new Date(ts);
        return `${d.getFullYear()}.${String(d.getMonth()+1).padStart(2,'0')}`;
      };
      const xrTotalMonths = Math.max(1, xrMonthsBetween(xrDataMin, xrDataMax));
      // [index_25_1] 분양가/프리미엄 차트도 최근 5년을 초기 범위로 사용한다.
      const XR_DEFAULT_MONTHS = 60;
      if (xrTotalMonths > XR_DEFAULT_MONTHS) {
        xrMin = Math.max(0, 1 - XR_DEFAULT_MONTHS / xrTotalMonths);
      }

      /* [27_17] 기간(xrange) 연동 — 현재 선택 구간 내 거래 판정 + 건수 UI 갱신
         (시세 추이의 _onXRangeChange→updateSummaryPeriodCounts와 동일 개념.
          차트 데이터셋은 무수정 — 기간 표시는 기존처럼 x축 min/max 클리핑이 담당) */
      const inPeriod = t => {
        const min = xrDataMin + xrSpan * xrMin, max = xrDataMin + xrSpan * xrMax;
        return t.x >= min && t.x <= max;
      };
      const floorTabCount = k => TX.filter(t => FLOOR_RANGES[k].test(t.f) && inPeriod(t)).length;
      const floorTabCntRefs = [];                 /* [{key, cntEl}] — 층 탭 N건 제자리 갱신용 */
      function updateBunyangPeriodCounts(){
        floorTabCntRefs.forEach(r => { r.cntEl.textContent = floorTabCount(r.key) + '건'; });
        renderTypeLegend();                       /* 면적 범례 건수/평균 재집계 (항목 수 적어 재렌더 비용 무시 가능) */
        elVCount.textContent = `${visibleTX().filter(inPeriod).length}건 표시 중`;
      }

      /* [27_18] 층 탭 active 일괄 동기화 — '전체'는 빈 선택일 때, 개별 구간은 선택 집합 포함일 때 */
      function syncFloorTabActive(){
        floorTabCntRefs.forEach(r => {
          r.btn.classList.toggle('active', r.key === 'all' ? selFloors.size === 0 : selFloors.has(r.key));
        });
      }

      /* 현재 비율로 차트 x축 갱신 + 슬라이더 UI 갱신 */
      function applyXRange(){
        if (chart && xrSpan > 0) {
          const selMinX = xrDataMin + xrSpan * xrMin;
          const selMaxX = xrDataMin + xrSpan * xrMax;
          const pad = (selMaxX - selMinX) * 0.02 || 86400000 * 15;
          chart.options.scales.x.min = selMinX - pad;
          chart.options.scales.x.max = selMaxX + pad;
          chart.update('none');
        }
        xr.minHandle.style.left = (xrMin * 100) + '%';
        xr.maxHandle.style.left = (xrMax * 100) + '%';
        xr.fill.style.left = (xrMin * 100) + '%';
        xr.fill.style.width = ((xrMax - xrMin) * 100) + '%';
        if (xr.rangeText && xrSpan > 0) {
          const selMinX = xrDataMin + xrSpan * xrMin;
          const selMaxX = xrDataMin + xrSpan * xrMax;
          xr.rangeText.textContent = `${xrFmtYM(selMinX)} ~ ${xrFmtYM(selMaxX)}`;
        }
        if (xr.presets) {
          const selMinX = xrDataMin + xrSpan * xrMin;
          const selMaxX = xrDataMin + xrSpan * xrMax;
          const selMonths = xrMonthsBetween(selMinX, selMaxX);
          const isFull = (xrMin === 0 && xrMax === 1);
          xr.presets.querySelectorAll('.xrange-presetBtn').forEach(b => {
            const m = Number(b.dataset.months);
            let active;
            if (m === 0) active = isFull;
            else active = !isFull && Math.abs(selMonths - m) <= 1 && Math.abs(xrMax - 1) < 0.02;
            b.classList.toggle('active', active);
          });
        }
        updateBunyangPeriodCounts();   /* [27_17] 기간 변경 → 층 탭·면적 범례·표시건수 갱신 */
      }

      /* 슬라이더 드래그 바인딩 (1회) */
      (function bindXR(){
        const getRatio = (e) => {
          const rect = xr.slider.getBoundingClientRect();
          const cx = e.touches ? e.touches[0].clientX : e.clientX;
          let x = cx - rect.left;
          if (x < 0) x = 0;
          if (x > rect.width) x = rect.width;
          return rect.width ? x / rect.width : 0;
        };
        const onDrag = (isMin) => (e) => {
          const r = getRatio(e);
          if (isMin) xrMin = Math.min(r, xrMax - 0.02);
          else xrMax = Math.max(r, xrMin + 0.02);
          applyXRange();
        };
        const attach = (el, isMin) => {
          const move = onDrag(isMin);
          const end = () => {
            document.removeEventListener('mousemove', move);
            document.removeEventListener('mouseup', end);
            document.removeEventListener('touchmove', move);
            document.removeEventListener('touchend', end);
          };
          el.addEventListener('mousedown', (e) => {
            e.preventDefault();
            document.addEventListener('mousemove', move);
            document.addEventListener('mouseup', end);
          });
          el.addEventListener('touchstart', () => {
            document.addEventListener('touchmove', move, { passive: false });
            document.addEventListener('touchend', end);
          }, { passive: true });
        };
        attach(xr.minHandle, true);
        attach(xr.maxHandle, false);
        if (xr.presets) {
          xr.presets.querySelectorAll('.xrange-presetBtn').forEach(btn => {
            btn.addEventListener('click', () => {
              const m = Number(btn.dataset.months);
              if (m === 0 || m >= xrTotalMonths) { xrMin = 0; xrMax = 1; }
              else { xrMax = 1; xrMin = Math.max(0, 1 - m / xrTotalMonths); }
              applyXRange();
            });
          });
        }
      })();

      /* 층 탭 생성 — [27_17] 층 구간이 단지별 동적 생성되므로 키를 순회('all' + f{시작층}…, 삽입 순서),
         건수는 기간(xrange) 내 거래만 (초기 표시도 기본 5년 구간 반영) */
      Object.keys(FLOOR_RANGES).forEach(k => {
        const cnt = floorTabCount(k);
        const b = document.createElement('button');
        b.className = 'bunyang-floor-tab' + (k === 'all' ? ' active' : '');
        b.innerHTML = `<span>${FLOOR_RANGES[k].label}</span><strong>${cnt}건</strong>`;
        floorTabCntRefs.push({ key: k, cntEl: b.querySelector('strong'), btn: b });   /* [27_17] 기간 변경 시 제자리 갱신 · [27_18] btn=active 동기화용 */
        b.onclick = () => {
          /* [27_18] 토글식 다중 선택 — '전체'는 개별 구간과 상호배타, 마지막 개별 구간 해제 시 '전체' 복귀 */
          if (k === 'all') selFloors.clear();
          else if (selFloors.has(k)) selFloors.delete(k);
          else selFloors.add(k);
          syncFloorTabActive();
          renderChart();
          renderTypeLegend();
        };
        elFloorTabs.appendChild(b);
      });

      /* 보기 토글 (스위치: 분양가 ↔ 프리미엄). .on = 프리미엄 보기 */
      function applyViewUI(){
        const isPrem = (curView === 'prem');
        elViewSwitch.classList.toggle('on', isPrem);
        elViewSwitch.setAttribute('aria-pressed', isPrem ? 'true' : 'false');
        elDesc.innerHTML = isPrem
          ? '<strong>프리미엄 보기:</strong> Y축 = 프리미엄(매매가 − 분양가). 0 기준선 위로 떠 있을수록 비싸게 거래된 것. (분양가 데이터 없는 거래는 제외)'
          : '<strong>분양가 보기:</strong> 매매가(●)와 분양가(세모)를 함께 표시. 꽉 찬 세모=정확한 분양가, 속 빈 세모=평균 분양가, 세모 없음=분양가 데이터 없음. 점선 길이 = 프리미엄.';
        elShapeLeg.style.display = isPrem ? 'none' : 'flex';
      }
      elViewSwitch.onclick = () => {
        curView = (curView === 'base') ? 'prem' : 'base';
        applyViewUI();
        renderChart();
      };
      applyViewUI();

      /* 면적 토글 범례 (면적 기준, 라벨=대표 타입) */
      function renderTypeLegend(){
        elTypeLeg.innerHTML = '';
        const floorTX = filteredTX();
        ALL_AREAS.forEach(area => {
          const k = area.toFixed(4);
          const tt = floorTX.filter(t => areaKey(t) === k);
          if (!tt.length) return;
          /* [27_17] 표시 건수/평균은 기간(xrange) 내 거래만 집계. 항목 표시/숨김 판정은 기존대로
             층 필터 기준(tt) 유지 — 기간을 좁혀 0건이 돼도 항목은 '0건'으로 남는다
             (드래그 중 항목 깜빡임 방지, 시세 추이 버튼이 0건에도 유지되는 것과 통일) */
          const pt = tt.filter(inPeriod);
          const s = statsOf(pt);
          const off = hidden.has(k);
          const item = document.createElement('div');
          item.className = 'bunyang-leg-item' + (off ? ' off' : '');
          item.onclick = () => {
            if (hidden.has(k)) hidden.delete(k); else hidden.add(k);
            renderChart();
            renderTypeLegend();
          };
          /* 프리미엄 평균: 계산 가능한 거래가 있으면 표시, 전부 missing이면 '-' */
          const avgHTML = s ? `<span class="avg">${fmtSigned(s.avg)}</span>` : `<span class="avg" style="color:#bbb">-</span>`;
          item.innerHTML = `
            <span class="sw" style="background:${COLOR[k]}"></span>
            <span>${labelOf(area)}</span>
            <span class="cnt">${pt.length}건</span>
            ${avgHTML}`;
          elTypeLeg.appendChild(item);
        });
      }

      /* 차트 렌더 */
      function renderChart(){
        if (chart) { try { chart.destroy(); } catch(e){} chart = null; }
        const vis = visibleTX();
        elVCount.textContent = `${vis.length}건 표시 중`;

        if (!vis.length) {
          chart = new Chart(canvas, { data:{datasets:[]}, options:{
            responsive:true, maintainAspectRatio:false,
            plugins:{legend:{display:false}, tooltip:{enabled:false}},
            scales:{ x: COMMON_X(), y:{ grid:{color:'rgba(136,135,128,0.10)'} } }
          }});
          dongAreaCharts.push(chart);
          applyXRange();
          return;
        }

        if (curView === 'base') chart = buildBase();
        else chart = buildPrem();
        if (chart) {
          dongAreaCharts.push(chart);
          /* [v22] 툴팁 닫기: 캔버스 '안'에서 닫으면 표시 동작과 충돌(떴다 즉시 닫힘)하므로,
             캔버스 '바깥'(문서 내 다른 곳)을 탭/클릭할 때만 닫는다. 1회만 바인딩. */
          if (!canvas._bunyangCloserBound) {
            canvas._bunyangCloserBound = true;
            document.addEventListener('click', (e) => {
              if (!chart || !chart.canvas) return;
              if (chart.canvas.contains(e.target)) return;   /* 캔버스 안 클릭은 무시(표시 담당) */
              const tEl = (typeof _bunyangTtMap !== 'undefined') && _bunyangTtMap.get(chart);
              if (tEl && tEl.style.opacity !== '0') {
                tEl.style.opacity = '0';
                chart.setActiveElements([]);
                try { chart.update('none'); } catch(_){}
              }
            });
          }
        }
        applyXRange();   /* 보존된 기간 비율을 새 차트에 적용 + 슬라이더 UI 동기화 */
      }

      /* 분양가 보기 */
      function buildBase(){
        const ds = [];
        const floorTX = filteredTX();
        ALL_AREAS.forEach(area => {
          const k = area.toFixed(4);
          if (hidden.has(k)) return;
          const tt = floorTX.filter(t => areaKey(t) === k);
          if (!tt.length) return;
          const color = COLOR[k];
          /* 점선(분양가→매매가): 면적별 1개 데이터셋으로 통합(거래마다 [base,a,null] 세그먼트).
             segment 사이를 null로 끊어 여러 거래를 한 데이터셋에 표현 → 데이터셋 수 최소화.
             hover 비대상(아래 매매가 점만 hover) */
          const lineData = [];
          tt.forEach(t => {
            if (t.kind === 'missing' || t.base == null) return;
            const x = t.x;
            lineData.push({x,y:t.base}, {x,y:t.a}, {x,y:null});
          });
          if (lineData.length) ds.push({ type:'line', data: lineData,
            borderColor: color + '40', borderDash:[2,2], borderWidth:1, spanGaps:false,
            pointRadius:0, pointHoverRadius:0, hoverRadius:0, pointHitRadius:0, showLine:true, fill:false,
            order:4, _noHover:true });
          /* 분양가 마커: official=꽉찬 세모 / average=속 빈 세모 / missing=마커 없음
             (hover 비대상 — 같은 x의 매매가 점이 안정적으로 잡히도록 pointHoverRadius=pointRadius) */
          const offPts = tt.filter(t => t.kind === 'official');
          const avgPts = tt.filter(t => t.kind === 'average');
          if (offPts.length) ds.push({ type:'scatter', _kind:'bun', _areaK:k, _noHover:true,
            data: offPts.map(t => ({x:t.x, y:t.base, _t:t})),
            backgroundColor: color, borderColor: color, borderWidth:0,
            pointStyle:'triangle', pointRadius:6, pointHoverRadius:6, pointHitRadius:0, order:2 });
          if (avgPts.length) ds.push({ type:'scatter', _kind:'bun', _areaK:k, _noHover:true,
            data: avgPts.map(t => ({x:t.x, y:t.base, _t:t})),
            backgroundColor: 'rgba(0,0,0,0)', borderColor: color, borderWidth:1.6,
            pointStyle:'triangle', pointRadius:6, pointHoverRadius:6, pointHitRadius:0, order:2 });
          /* 매매가 점(전체) — 유일한 hover 대상 */
          ds.push({ type:'scatter', _kind:'sale', _areaK:k,
            data: tt.map(t => ({x:t.x, y:t.a, _t:t})),
            backgroundColor: color, borderColor:'#fff', borderWidth:1, pointRadius:5, pointHoverRadius:7.5, order:1 });
        });
        const vis = visibleTX();
        const ys = []; vis.forEach(t => { ys.push(t.a); if (t.base != null) ys.push(t.base); });
        const ymin = Math.floor(Math.min(...ys)/1000)*1000 - 500;
        const ymax = Math.ceil(Math.max(...ys)/1000)*1000 + 500;
        return new Chart(canvas, {
          data:{datasets:ds},
          options:{
            responsive:true, maintainAspectRatio:false,
            layout:{padding:{right:14,left:0,top:10,bottom:0}},
            interaction:{ mode:'nearest', intersect:false, axis:'xy' },
            plugins:{
              legend:{display:false},
              tooltip:{ enabled:false, external: bunyangTooltipHandler }
            },
            scales:{
              x: COMMON_X(),
              y:{ min:ymin, max:ymax, title:{display:false}, ticks:{ callback:v=>(v/10000).toFixed(1)+'억', color:'#888780', font:{size:10} }, grid:{color:'rgba(136,135,128,0.10)'} }
            }
          }
        });
      }

      /* 프리미엄 보기 (missing=분양가 없음 거래는 제외) */
      function buildPrem(){
        const ds = [];
        const floorTX = filteredTX();
        ALL_AREAS.forEach(area => {
          const k = area.toFixed(4);
          if (hidden.has(k)) return;
          const tt = floorTX.filter(t => areaKey(t) === k && t.kind !== 'missing' && t.base != null);
          if (!tt.length) return;
          const color = COLOR[k];
          /* official=진한 채움, average=옅은 채움(속 빈 세모와 동일한 "평균" 신호) */
          ds.push({ type:'scatter', _kind:'prem', _areaK:k,
            data: tt.map(t => ({x:t.x, y:t.a-t.base, _t:t})),
            backgroundColor: tt.map(t => t.kind === 'average' ? color + '88' : color),
            borderColor: color, borderWidth:1.2, pointRadius:5, pointHoverRadius:7.5 });
        });
        const zeroLine = {
          id:'bunyangZero',
          beforeDatasetsDraw(c){
            const {ctx, chartArea, scales:{y}} = c;
            const yz = y.getPixelForValue(0);
            if (yz < chartArea.top || yz > chartArea.bottom) return;
            ctx.save();
            ctx.strokeStyle = 'rgba(180,140,80,0.5)'; ctx.setLineDash([4,4]); ctx.lineWidth = 1;
            ctx.beginPath(); ctx.moveTo(chartArea.left, yz); ctx.lineTo(chartArea.right, yz); ctx.stroke();
            ctx.fillStyle = '#a07a3a'; ctx.font = '10px sans-serif'; ctx.textAlign = 'left';
            ctx.fillText('프리미엄 0 (= 분양가)', chartArea.left+4, yz-3);
            ctx.restore();
          }
        };
        const vis = visibleTX().filter(t => t.kind !== 'missing' && t.base != null);
        const prems = vis.map(t => t.a - t.base);
        const ymin = Math.floor(Math.min(...prems, 0)/1000)*1000 - 300;
        const ymax = Math.ceil(Math.max(...prems)/1000)*1000 + 300;
        return new Chart(canvas, {
          data:{datasets:ds},
          options:{
            responsive:true, maintainAspectRatio:false,
            layout:{padding:{right:14,left:0,top:10,bottom:0}},
            interaction:{ mode:'nearest', intersect:false, axis:'xy' },
            plugins:{
              legend:{display:false},
              tooltip:{ enabled:false, external: bunyangTooltipHandler }
            },
            scales:{
              x: COMMON_X(),
              y:{ min:ymin, max:ymax, title:{display:true, text:'프리미엄 (만원)', color:'#888780', font:{size:11}}, ticks:{ callback:v=>fmtSigned(v), color:'#888780', font:{size:10} }, grid:{color:'rgba(136,135,128,0.10)'} }
            }
          },
          plugins:[zeroLine]
        });
      }

      /* [v22] 분양가 전용 external tooltip 핸들러
         - 시세 추이 툴팁과 동일한 알파/경계선/그림자 (TOOLTIP_ALPHA·getPaletteFactor 재사용)
         - 배경 베이스 = 해당 면적 타입색(별도 색 정의 없음)
         - average면 동·호별 분양가 상세를 호 순으로 나열(길면 툴팁 내부 스크롤)
         - missing이면 "분양가 데이터 없음" */
      function bunyangTooltipHandler(context){
        const { chart: ch, tooltip } = context;
        const tipEl = getBunyangTooltipEl(ch);
        if (!tooltip || tooltip.opacity === 0) { bunyangTtScheduleHide(tipEl); return; }
        const dp = tooltip.dataPoints && tooltip.dataPoints[0];
        if (!dp || !dp.raw || !dp.raw._t) { tipEl.style.opacity = '0'; return; }
        if (tipEl._hideTimer) { clearTimeout(tipEl._hideTimer); tipEl._hideTimer = null; }

        const t = dp.raw._t;
        const ds = ch.data.datasets[dp.datasetIndex];
        const mid = COLOR[ds._areaK] || '#888888';
        const r = parseInt(mid.slice(1,3),16), g = parseInt(mid.slice(3,5),16), b = parseInt(mid.slice(5,7),16);
        const factor = (typeof getPaletteFactor === 'function') ? getPaletteFactor(mid) : 0.7;
        const eR = Math.round(r*factor), eG = Math.round(g*factor), eB = Math.round(b*factor);
        const txtColor = (typeof pickTextColorForAlpha === 'function') ? pickTextColorForAlpha(mid, TOOLTIP_ALPHA) : '#000';

        tipEl.innerHTML = buildBunyangTooltipHTML(t, txtColor);

        tipEl.style.background = `rgba(${r},${g},${b},${TOOLTIP_ALPHA})`;
        tipEl.style.color = txtColor;
        tipEl.style.border = TOOLTIP_BORDER ? `1px solid rgba(${eR},${eG},${eB},0.7)` : '0 solid transparent';
        tipEl.style.boxShadow = TOOLTIP_SHADOW ? '0 4px 14px rgba(0,0,0,0.18)' : 'none';

        /* 위치: 점 위로. 좌우가 차트 영역을 넘지 않도록 클램프(모바일 좁은 화면 대응).
           translateY(-100%)는 CSS 유지, translateX는 여기서 동적 계산해 가장자리에서 안으로 당김 */
        const wrapEl = ch.canvas.parentNode;
        const wrapW = wrapEl ? wrapEl.clientWidth : 0;
        const ttW = tipEl.offsetWidth || 248;
        const caretX = ch.canvas.offsetLeft + tooltip.caretX;
        const caretY = ch.canvas.offsetTop + tooltip.caretY;
        const MARGIN = 6;
        /* 기본은 점 중앙 정렬(left - ttW/2). 좌우 경계를 넘으면 보정 */
        let leftPx = caretX - ttW / 2;
        if (leftPx < MARGIN) leftPx = MARGIN;
        if (wrapW && leftPx + ttW > wrapW - MARGIN) leftPx = Math.max(MARGIN, wrapW - MARGIN - ttW);
        tipEl.style.left = leftPx + 'px';
        tipEl.style.top  = caretY + 'px';
        tipEl.style.transform = 'translateY(-100%) translateY(-10px)';  /* 가로 중앙정렬 해제(left로 직접 지정) */
        tipEl.style.opacity = '1';
      }

      /* 툴팁 HTML 구성 */
      function buildBunyangTooltipHTML(t, txtColor){
        const head = `<div class="bn-tt-title">${labelOf(t.area)} · ${t.f}층</div>`;
        const rowSale = `<div class="bn-tt-row"><span>매매가</span><span class="v">${t.a.toLocaleString()}만원</span></div>`;
        if (t.kind === 'missing' || t.base == null){
          return head + rowSale + `<div class="bn-tt-nodata">분양가 데이터 없음</div>`;
        }
        const prem = t.a - t.base;
        const bunLabel = (t.kind === 'official') ? '분양가' : '분양가(평균)';
        const rows = rowSale
          + `<div class="bn-tt-row"><span>${bunLabel}</span><span class="v">${t.base.toLocaleString()}만원</span></div>`
          + `<div class="bn-tt-row"><span>프리미엄</span><span class="v">${fmtSigned(prem)}만원</span></div>`;
        /* 동·호별 상세 (동→호 순). items는 buildBunyangIndex에서 이미 정렬됨 */
        let detail = '';
        if (t.items && t.items.length){
          const byDong = {};
          t.items.forEach(it => { (byDong[it.d] ||= []).push(it); });
          const dongKeys = Object.keys(byDong).map(Number).sort((a,b)=>a-b);
          let list = '';
          dongKeys.forEach(d => {
            const hs = byDong[d].slice().sort((x,y)=>x.h-y.h)
              .map(it => `${it.h}호 ${it.p.toLocaleString()}`).join(', ');
            list += `<div class="bn-tt-dong"><span class="dn">${d}동</span><span class="hs">${hs}</span></div>`;
          });
          const noteEq = (t.kind === 'official') ? ', 전부 동일가' : '';
          detail = `<div class="bn-tt-detail-label">동·호별 분양가 (${t.n}세대${noteEq})</div>`
                 + `<div class="bn-tt-list">${list}</div>`;
        }
        return `<div class="bn-tt-head">${head}<div class="bn-tt-rows">${rows}</div></div>${detail}`;
      }

      /* 초기 렌더 */
      renderChart();
      renderTypeLegend();
      return true;
    }

    async function loadAndRenderDongArea(meta){
      const normalizedMeta = normalizeDongAreaMeta(meta);
      if(!normalizedMeta) return;

      currentDongAreaMeta = normalizedMeta;
      clearDongAreaCharts();
      setDongAreaTitle(normalizedMeta);

      // [v23_1] 세대수: apt_master(MySQL)에서 조회해 헤더에 추가 (거래 로드와 독립적, 비차단)
      // [index_24_1] spread({...meta, sds}) → 공유 normalizedMeta에 기록 후 재출력으로 변경
      //   (분양권 배지·준공년도도 거래 도착 후 같은 메타에 기록 → 도착 순서 무관, 조각 유실 없음)
      fetchAptSds(normalizedMeta.aptNm, normalizedMeta.sggCd).then(sds => {
        if (sds == null) return;
        normalizedMeta.sds = sds;
        // 응답 도착 전에 다른 단지로 바뀌었으면 무시 (오래된 응답이 새 제목을 덮어쓰지 않게)
        if (!currentDongAreaMeta) return;
        if (currentDongAreaMeta.aptNm !== normalizedMeta.aptNm) return;
        if (currentDongAreaMeta.sggCd !== normalizedMeta.sggCd) return;
        setDongAreaTitle(normalizedMeta);
      });

      // [index_24_1] setDongAreaSelectValue 호출 제거 — 드롭다운 은퇴
      dongAreaResult.innerHTML = '<div class="dap-loading">데이터 불러오는 중...</div>';

      try {
        // [index_24_1] isSilv 판정을 여기서 하지 않음 — 거래 도착 후(아래 IIFE 내부) 폴더 출처로 판정

        dongAreaResult.innerHTML = '';
        /* [27_31] 시세 추이 섹션 헤더 append 제거 — 담백화(요청 1). buildSummarySectionHeader()는 미사용으로 존치 */

        // 종합 시세 차트 자리
        const summaryPlaceholder = document.createElement('div');
        summaryPlaceholder.className = 'dap-summary-card';
        summaryPlaceholder.id = 'dapSummaryPlaceholder';
        summaryPlaceholder.innerHTML = '<div class="dap-loading" style="text-align:center;">종합 시세 차트 불러오는 중...</div>';
        dongAreaResult.appendChild(summaryPlaceholder);

        // 거래 1회 로드 → 동별 표 + 종합 차트(+분양가) 모두 생성 (중복 fetch 없음)
        (async () => {
          try {
            summaryChartInstances.forEach(c => { try { c.destroy(); } catch(e) {} });
            summaryChartInstances = [];
            summaryAllTrades = [];
            summaryAreaGroups = {};
            summaryRoundedGroups = {};
            summaryCardRefs = [];
            summaryExplorerRef = null;

            const trades = await fetchAllTradesForApt(
              normalizedMeta.aptNm,
              normalizedMeta.sggCd,
              normalizedMeta.umdNm
            );

            summaryAllTrades = trades;
            summaryAreaGroups = groupTradesByArea(trades);
            summaryRoundedGroups = groupAreasByRounded(summaryAreaGroups);

            /* [index_24_1] 분양권 판정 — 명단(_source) 대신 거래 출처(폴더 신분증) 사용
               가져온 거래가 1건 이상이고 전부 silv 폴더 출신이면 분양권.
               매매 거래가 하나라도 섞이면 매매 취급(기존 명단 중복제거 규칙과 동일 기준).
               거래 0건이면 매매 기본(보여줄 데이터가 없어 실해 없음, 기존 동작과 동일) */
            const isSilv = (normalizedMeta._source === 'silv')
              || (trades.length > 0 && trades.every(t => t._source === 'silv'));

            /* [index_24_1] 헤더 부제목 보강 — 세대수(sds)와 같은 '공유 메타 기록 후 재출력' 패턴
               · 분양권 배지: 판정 결과를 normalizedMeta._source에 기록
               · 준공년도: 거래 레코드의 buildYear에서 추출 (매매 거래만 보유, 분양권 거래엔 없음)
               · 늦은 응답 가드: 다른 단지로 전환됐으면 제목 갱신 생략 (sds 가드와 동일 취지) */
            let titleDirty = false;
            if (isSilv && normalizedMeta._source !== 'silv') {
              normalizedMeta._source = 'silv';
              titleDirty = true;
            }
            if (normalizedMeta.buildYear == null) {
              const withYear = trades.find(t => {
                const y = Number(t.buildYear);
                return Number.isFinite(y) && y > 0;
              });
              if (withYear) {
                normalizedMeta.buildYear = Number(withYear.buildYear);
                titleDirty = true;
              }
            }
            if (titleDirty && currentDongAreaMeta === normalizedMeta) {
              setDongAreaTitle(normalizedMeta);
            }

            // ----- (1) 종합 시세 차트 : 거래 도착 즉시 가장 먼저 표시 -----
            const placeholder = document.getElementById('dapSummaryPlaceholder');
            if (!placeholder) return;

            if (trades.length === 0) {
              placeholder.innerHTML = '<div class="dap-loading" style="text-align:center; color:#999;">거래 데이터가 없습니다.</div>';
            } else {
              const insertBefore = placeholder.nextSibling;
              const parentEl = placeholder.parentNode;
              placeholder.remove();

              const roundedKeys = Object.keys(summaryRoundedGroups).sort((a, b) => Number(a) - Number(b));

              if (!roundedKeys.length) {
                const empty = document.createElement('div');
                empty.className = 'dap-summary-card';
                empty.innerHTML = '<div class="dap-loading" style="text-align:center;color:#999;">표시할 전용면적 데이터가 없습니다.</div>';
                parentEl.insertBefore(empty, insertBefore);
              } else {
                // [index_26] 면적대별 여러 카드 대신 단일 탐색 카드 1개만 만든다.
                summaryExplorerRef = buildSummaryChartCard(roundedKeys);
                summaryCardRefs = [summaryExplorerRef];
                parentEl.insertBefore(summaryExplorerRef.card, insertBefore);
                renderSummaryExplorer(summaryExplorerRef);
              }
            }

            // [index_25] 브라우저가 시세 추이를 먼저 그릴 기회를 준 뒤 후속 섹션을 생성한다.
            await new Promise(resolve => setTimeout(resolve, 0));

            // ----- (2) 동별 비교(매매) / 분양가·프리미엄(분양권) : 시세 추이 뒤에 순차 표시 -----
            if (isSilv) {
              try {
                const bunyangRaw = await fetchBunyangData(normalizedMeta.aptNm);
                const bunyangIdx = buildBunyangIndex(bunyangRaw);   /* [v22] 평면배열 → 면적+층 인덱스 */
                if (bunyangIdx) {
                  const bunyangBox = document.createElement('div');
                  bunyangBox.id = 'dapBunyangPlaceholder';
                  dongAreaResult.appendChild(bunyangBox);
                  bunyangBox.appendChild(buildBunyangSectionHeader());
                  const ok = renderBunyangSection(bunyangIdx, trades, bunyangBox);
                  if (!ok) {
                    const m = document.createElement('div');
                    m.className = 'dap-loading';
                    m.style.cssText = 'text-align:center;color:#999;padding:20px;';
                    m.textContent = '분양가와 매칭되는 거래가 없습니다.';
                    bunyangBox.appendChild(m);
                  }
                }
                /* 분양가 파일 없는 단지: 섹션 생략 (기존과 동일) */
              } catch (be) {
                console.error('[분양가 섹션] 렌더 오류:', be);
              }
            } else {
              const areas = buildAreasFromTrades(trades);
              if (!areas.length) {
                const noDataMsg = document.createElement('div');
                noDataMsg.className = 'dap-error';
                noDataMsg.textContent = '동 정보가 있는 거래가 없습니다. 종합 차트에서 모든 거래를 확인하세요.';
                dongAreaResult.appendChild(noDataMsg);
              } else if (DONG_COMPARE_UI === 'tabs') {
                /* [30_3] 면적 탭 1개 + 카드 1개. 탭 클릭 시 표·차트·기간 슬라이더를 통째로 교체 */
                dongAreaResult.appendChild(buildDongSectionHeader());   // [v16] 동별 비교 헤더
                const dongCompareRef = buildDongCompareCard(areas, normalizedMeta.aptNm);
                dongAreaResult.appendChild(dongCompareRef.card);
                renderDongCompareTabs(dongCompareRef);
                renderDongCompareBody(dongCompareRef);
              } else {
                /* ↓↓↓ 이하 기존 면적별 카드 N개 경로 — DONG_COMPARE_UI === 'stacked' 일 때만 실행 ↓↓↓ */
                dongAreaResult.appendChild(buildDongSectionHeader());   // [v16] 동별 비교 헤더
                areas.forEach(areaData => {
                  const { card, canvas, xrangeRefs } = renderDongAreaTable(areaData, normalizedMeta.aptNm);
                  dongAreaResult.appendChild(card);
                  const dongChart = buildDongAreaChart(areaData, canvas);
                  if (dongChart) bindChartXRangeSlider(dongChart, xrangeRefs);
                });
              }
            }
          } catch (e) {
            const placeholder = document.getElementById('dapSummaryPlaceholder');
            if (placeholder) {
              placeholder.innerHTML = '<div class="dap-loading" style="text-align:center; color:#999;">종합 차트 로드 실패</div>';
            }
          }
        })();
      } catch(err) {
        dongAreaResult.innerHTML = `<div class="dap-error">오류: ${escapeHtml(err.message)}</div>`;
      }
    }

    function getDongAreaPanelMaxWidth(){
      if (window.innerWidth <= 768) return window.innerWidth;
      const rightReserved = transactionPanel.classList.contains('open') ? 430 : 80;
      return Math.max(DONG_AREA_PANEL_MIN_WIDTH, window.innerWidth - rightReserved - 120);
    }

    function setDongAreaPanelWidth(width){
      if (window.innerWidth <= 768) {
        document.documentElement.style.setProperty('--dong-area-panel-width', '100vw');
        return;
      }
      const clamped = Math.min(Math.max(Math.round(width), DONG_AREA_PANEL_MIN_WIDTH), getDongAreaPanelMaxWidth());
      currentDongAreaWidth = clamped;
      document.documentElement.style.setProperty('--dong-area-panel-width', `${clamped}px`);
      updateLeftUiPosition();
    }

    function updateLeftUiPosition(){
      const isMobile = window.innerWidth <= 768;
      const sl = document.getElementById('stationList');
      const scl = document.getElementById('schoolDistList');
      const bl = document.getElementById('bigList');   // [26_10]
      const nl = document.getElementById('newList');   // [26_10]
      if(isMobile){
        sideFilters.style.left = '10px';
        brandList.style.left = '110px';
        if(sl) sl.style.left = '110px';
        if(scl) scl.style.left = '110px';
        if(bl) bl.style.left = '110px';
        if(nl) nl.style.left = '110px';
        return;
      }

      if(dongAreaPanel.classList.contains('open')){
        sideFilters.style.left = `${currentDongAreaWidth + 10}px`;
        brandList.style.left = `${currentDongAreaWidth + 110}px`;
        if(sl) sl.style.left = `${currentDongAreaWidth + 110}px`;
        if(scl) scl.style.left = `${currentDongAreaWidth + 110}px`;
        if(bl) bl.style.left = `${currentDongAreaWidth + 110}px`;
        if(nl) nl.style.left = `${currentDongAreaWidth + 110}px`;
      } else {
        sideFilters.style.left = '10px';
        brandList.style.left = '110px';
        if(sl) sl.style.left = '110px';
        if(scl) scl.style.left = '110px';
        if(bl) bl.style.left = '110px';
        if(nl) nl.style.left = '110px';
      }
    }

    function initDongAreaResize(){
      let resizing = false;
      let startX = 0;
      let startWidth = currentDongAreaWidth;

      function onMove(e){
        if(!resizing) return;
        const nextWidth = startWidth + (e.clientX - startX);
        setDongAreaPanelWidth(nextWidth);
      }

      function onUp(){
        if(!resizing) return;
        resizing = false;
        document.body.classList.remove('resizing-dong-panel');
        document.removeEventListener('mousemove', onMove);
        document.removeEventListener('mouseup', onUp);
      }

      dongAreaResizeHandle.addEventListener('mousedown', (e) => {
        if(window.innerWidth <= 768) return;
        if(!dongAreaPanel.classList.contains('open')) return;
        e.preventDefault();
        resizing = true;
        startX = e.clientX;
        startWidth = currentDongAreaWidth;
        document.body.classList.add('resizing-dong-panel');
        document.addEventListener('mousemove', onMove);
        document.addEventListener('mouseup', onUp);
      });

      window.addEventListener('blur', onUp);
    }

    // [index_26_6] 상세 패널 열림에 대응하는 브라우저 히스토리 항목 보유 여부.
    //   패널을 열 때 1회 pushState → 모바일/브라우저 '뒤로가기'가 페이지를 이탈하지 않고 패널만 닫게 한다.
    let dapHistoryPushed = false;

    async function openDongAreaPanel(meta){
      const normalizedMeta = normalizeDongAreaMeta(meta);
      if(!normalizedMeta || !normalizedMeta.aptNm) return;

      dongAreaPanel.classList.add('open');
      // [index_26_6] 패널이 열린 동안 뒤로가기를 1회 흡수하기 위한 히스토리 항목(이미 있으면 중복 push 안 함 → 단지 전환 시 누적 방지).
      if(!dapHistoryPushed){
        try { history.pushState({ dapPanel: true }, ''); dapHistoryPushed = true; } catch(_) {}
      }
      updateLeftUiPosition();
      setDongAreaTitle(normalizedMeta);
      dongAreaResult.innerHTML = '<div class="dap-loading">데이터 불러오는 중...</div>';

      // [index_24_1] 명단 API(apt_dong_area.php/silv_area.php) 경유 제거 — 클릭 메타로 바로 렌더
      //   (분양권 여부·준공년도는 loadAndRenderDongArea가 거래 도착 후 자체 판정/보강)
      try {
        await loadAndRenderDongArea(normalizedMeta);
      } catch(err) {
        dongAreaResult.innerHTML = `<div class="dap-error">데이터를 불러오지 못했습니다: ${escapeHtml(err.message)}</div>`;
      }
    }

    // [index_26_6] fromPopstate=true면 브라우저가 이미 히스토리 항목을 pop한 상태(뒤로가기) → history.back() 재호출 금지.
    //   닫기 버튼 등으로 직접 닫을 때는 우리가 쌓은 항목을 history.back()으로 소비해 히스토리를 깨끗이 유지한다.
    function closeDongAreaPanel(fromPopstate){
      dongAreaPanel.classList.remove('open');
      updateLeftUiPosition();
      if(dapHistoryPushed){
        dapHistoryPushed = false;
        if(!fromPopstate){
          try { history.back(); } catch(_) {}
        }
      }
    }


    let APTS = [];
    let drawn = []; 

    function pick(item, keys){
      for(const k of keys){ if(item && Object.prototype.hasOwnProperty.call(item, k)) return item[k]; }
      return undefined;
    }

    async function loadApts(){
      try {
        const res = await fetch(APT_JSON_URL, { cache: "no-store" });
        if(!res.ok) throw new Error("Load failed");
        const raw = await res.json();
        const arr = Array.isArray(raw) ? raw : (Array.isArray(raw?.items) ? raw.items : []);
        const out = [];
        for(const it of arr){
            const aptNm = pick(it, ["aptNm","aptName","name","아파트 이름","아파트명","apt_nm"]);
            const dispNm = pick(it, ["표기 이름","표기이름","dispNm","displayName"]); // [24_2] 지도 라벨 표기 전용(선택). 데이터 조회엔 절대 미사용.
            const lat = pick(it, ["lat","Lat","latitude","위도"]);
            const lng = pick(it, ["lng","Lng","longitude","경도"]);
            const sggCd = pick(it, ["sggCd","sgg_cd","시군구코드"]);
            const umdNm = pick(it, ["umdNm","법정동","동명"]);
            const buildYear = pick(it, ["buildYear","build_year","준공년도","건축년도"]);
            if(!aptNm || lat == null || lng == null) continue;

            const sggCdNum = sggCd == null || String(sggCd).trim() === '' ? null : Number(sggCd);
            const buildYearNum = buildYear == null || String(buildYear).trim() === '' ? null : Number(buildYear);

            out.push({
              aptNm: String(aptNm),
              dispNm: (dispNm == null || String(dispNm).trim() === '') ? null : String(dispNm), // [24_2] 지도 라벨용. null이면 aptNm 그대로 노출.
              lat: Number(lat),
              lng: Number(lng),
              sggCd: Number.isFinite(sggCdNum) ? sggCdNum : null,
              umdNm: umdNm == null ? '' : String(umdNm),
              buildYear: Number.isFinite(buildYearNum) ? buildYearNum : null,
              gu: sggCdToGu(sggCdNum)
            });
        }
        APTS = out;
        toast(`지도 데이터 로드: ${APTS.length}개`, 1000);
      } catch(e) {
        toast("아파트 데이터 로드 실패");
      }
    }

    /* [27_37] 분양권 좌표 로더 — silv_coor.json을 읽어 APTS 뒤에 append.
       · 파싱 규약은 loadApts()와 완전히 동일(pick 키 목록·타입 변환·gu 산출까지 동일) —
         APTS 원소의 형태가 매매/분양권에서 갈리지 않아야 소비처 6곳을 손대지 않을 수 있다.
       · silv_coor.json엔 '표기 이름'(dispNm)이 없어 항상 null → 라벨은 aptNm 그대로 표기.
       · 반드시 loadApts() '뒤'에 호출할 것. daejangBuildCoordIndex()·findPolygonForApt() 등이
         first-wins 방식이라 매매 항목이 먼저 들어가 있어야 동명 단지에서 매매가 우선한다.
       · 분양 배지/스파크 판정(presaleAptKeys)은 최근 24개월 거래 출처로 정해지므로 이 파일과 무관.
         여기서는 좌표만 공급한다.
       · 성공 시 토스트를 띄우지 않음 — 직후 loadAptMasterMeta()의 토스트가 즉시 덮어써 보이지 않기 때문.
         실패해도 분양권 라벨만 빠질 뿐 기존 동작에는 영향이 없다(APTS 무변경). */
    async function loadSilvCoords(){
      try {
        const res = await fetch(SILV_JSON_URL, { cache: "no-store" });
        if(!res.ok) throw new Error("Load failed");
        const raw = await res.json();
        const arr = Array.isArray(raw) ? raw : (Array.isArray(raw?.items) ? raw.items : []);
        const out = [];
        for(const it of arr){
            const aptNm = pick(it, ["aptNm","aptName","name","아파트 이름","아파트명","apt_nm"]);
            const dispNm = pick(it, ["표기 이름","표기이름","dispNm","displayName"]); // 지도 라벨 표기 전용(선택). 데이터 조회엔 절대 미사용.
            const lat = pick(it, ["lat","Lat","latitude","위도"]);
            const lng = pick(it, ["lng","Lng","longitude","경도"]);
            const sggCd = pick(it, ["sggCd","sgg_cd","시군구코드"]);
            const umdNm = pick(it, ["umdNm","법정동","동명"]);
            const buildYear = pick(it, ["buildYear","build_year","준공년도","건축년도"]);
            if(!aptNm || lat == null || lng == null) continue;

            const sggCdNum = sggCd == null || String(sggCd).trim() === '' ? null : Number(sggCd);
            const buildYearNum = buildYear == null || String(buildYear).trim() === '' ? null : Number(buildYear);

            out.push({
              aptNm: String(aptNm),
              dispNm: (dispNm == null || String(dispNm).trim() === '') ? null : String(dispNm),
              lat: Number(lat),
              lng: Number(lng),
              sggCd: Number.isFinite(sggCdNum) ? sggCdNum : null,
              umdNm: umdNm == null ? '' : String(umdNm),
              buildYear: Number.isFinite(buildYearNum) ? buildYearNum : null,
              gu: sggCdToGu(sggCdNum)
            });
        }
        // 배열 재할당 대신 append — 파싱 도중 예외가 나면 APTS를 건드리지 않고 그대로 둔다.
        for(const o of out) APTS.push(o);
      } catch(e) {
        toast("분양권 좌표 로드 실패");
      }
    }

    function clearDrawn(){
      for(const d of drawn){
        try { d.marker?.setMap(null); } catch(e){}
        try { d.overlay?.setMap(null); } catch(e){}
      }
      drawn = [];
      // [26_7] 라벨이 전부 파괴되므로 크레인 레지스트리도 비움 (rAF 루프는 비면 다음 프레임에 스스로 정지).
      //   activeCranes 선언/구동부는 아래 drawMarkers 직후 '분양권 라벨 크레인' 블록(런타임 호출 시점엔 항상 초기화 완료).
      activeCranes.length = 0;
      // [26_11] 분양 스파크 레지스트리도 동일하게 비움 (rAF 루프는 비면 다음 프레임에 스스로 정지).
      //   activeSparks 선언/구동부는 크레인 블록 아래 '분양권 라벨 스파크' 블록(런타임 호출 시점엔 항상 초기화 완료).
      activeSparks.length = 0;
      // [26_12] 신규거래 젤리 레지스트리도 동일하게 비움 (rAF 루프는 비면 다음 프레임에 스스로 정지).
      //   activeNewtxJellies 선언/구동부는 스파크 블록 아래 '신규거래 라벨 젤리 바운스' 블록(런타임 호출 시점엔 항상 초기화 완료).
      activeNewtxJellies.length = 0;
    }

    /* ===== [역세권 기능] ===== */
    const METRO_JSON_URL = "../data/metro.json";
    let metroStaticOverlays = [];   // 역 마커, 역 라벨, 거리 반경 원
    let metroRippleCircles = [];    // 반복 애니메이션용 원
    let metroRippleTimer = null;    // 반복 타이머
    let metroRadarOverlays = [];    // [v4] '모던 브랜드 블루' 레이더 CustomOverlay 목록 {overlay, center, content}
    let isStationMode = false;
    let metroDataCache = null;
    let metroRadius = null;         // [index_20] 현재 선택값: null(미선택) / 'all'(전체) / 숫자 반경(m)

    // [index_18_fast] 역세권도 학구도처럼 화면 근처만 실제 렌더링
    const METRO_VIEWPORT_PADDING_RATIO = 0.20;
    let metroPolygonOverlays = [];
    let metroCurrentCandidateApts = [];
    let metroCurrentCandidateAptKeySet = new Set(); // [통합필터] 역세권 후보 빠른 교집합 판정용
    let metroCurrentCandidatePolygons = [];
    let metroCurrentPolygonData = [];
    let metroCurrentIsAll = true;
    let metroCurrentEffectiveRadius = null;
    let metroRenderSeq = 0;

    // [v14_8a] 지도 드래그 중 플래그 + 리스너 1회 등록
    //  - 드래그 중에는 ripple의 setRadius/setOptions 호출을 일시정지하여
    //    ripple이 카카오 SVG transform과 함께 정거장을 자연스럽게 따라가도록 함
    let isMapDragging = false;
    kakao.maps.event.addListener(map, 'dragstart', () => { isMapDragging = true; });
    kakao.maps.event.addListener(map, 'dragend',   () => { isMapDragging = false; });

    // [NEW v14_5] 단지 외곽 폴리곤 데이터 (apt_coor.json과 동일 디렉토리)
    const POLYGON_JSON_URL = "../map/polygon.json";
    let polygonDataCache = null;
    let metroPolygons = [];          // 현재 표시 중인 단지 폴리곤들 (애니메이션 대상)
    let polygonPulseFrame = null;    // requestAnimationFrame 핸들

    async function loadMetroData() {
      if (metroDataCache) return metroDataCache;
      try {
        const res = await fetch(METRO_JSON_URL, { cache: "no-store" });
        if (!res.ok) throw new Error("Load failed");
        metroDataCache = await res.json();
        return metroDataCache;
      } catch(e) {
        toast("역 데이터 로드 실패");
        return [];
      }
    }

    // [NEW v14_5] 단지 외곽 폴리곤 데이터 로드 (실패 시 빈 배열, 캐시는 비워두어 다음에 재시도 가능)
    async function loadPolygonData() {
      if (polygonDataCache) return polygonDataCache;
      try {
        const res = await fetch(POLYGON_JSON_URL, { cache: "no-store" });
        if (!res.ok) throw new Error("Load failed");
        const data = await res.json();
        polygonDataCache = Array.isArray(data) ? data : [];
        return polygonDataCache;
      } catch(e) {
        return []; // 캐시하지 않음 — 다음 호출에서 재시도
      }
    }

    // [NEW v14_5] APTS의 단지 1건과 polygon.json 항목을 매칭
    // 매칭 키: 이름(정규화) + sggCd(있으면) + umdNm(있으면)
    function findPolygonForApt(polygonData, apt) {
      if (!Array.isArray(polygonData) || !polygonData.length || !apt) return null;
      const targetName = normalizeName(apt.aptNm);
      return polygonData.find(p => {
        const pName = p["아파트 이름"] || p.aptNm || p.name || '';
        if (normalizeName(pName) !== targetName) return false;
        if (apt.sggCd != null && p.sggCd != null && Number(p.sggCd) !== Number(apt.sggCd)) return false;
        if (apt.umdNm && p.umdNm && valueTrim(p.umdNm) !== valueTrim(apt.umdNm)) return false;
        return true;
      }) || null;
    }


    // [index_18_fast] 현재 지도 화면 + 여유 영역 계산
    function metroGetViewportBox(paddingRatio = METRO_VIEWPORT_PADDING_RATIO) {
      const bounds = map.getBounds();
      const sw = bounds.getSouthWest();
      const ne = bounds.getNorthEast();
      const minLat = sw.getLat();
      const maxLat = ne.getLat();
      const minLng = sw.getLng();
      const maxLng = ne.getLng();
      const latPad = Math.abs(maxLat - minLat) * paddingRatio;
      const lngPad = Math.abs(maxLng - minLng) * paddingRatio;
      return {
        minLat: minLat - latPad,
        maxLat: maxLat + latPad,
        minLng: minLng - lngPad,
        maxLng: maxLng + lngPad
      };
    }

    function metroBboxIntersects(a, b) {
      if (!a || !b) return false;
      return a.minLat <= b.maxLat && a.maxLat >= b.minLat &&
             a.minLng <= b.maxLng && a.maxLng >= b.minLng;
    }

    function metroPointInViewport(lat, lng, box) {
      return Number.isFinite(lat) && Number.isFinite(lng) &&
             lat >= box.minLat && lat <= box.maxLat &&
             lng >= box.minLng && lng <= box.maxLng;
    }

    function metroPolygonEntryBounds(entry) {
      if (!entry || !Array.isArray(entry.outline)) return null;
      if (entry._metroBbox) return entry._metroBbox;

      const box = { minLat: Infinity, maxLat: -Infinity, minLng: Infinity, maxLng: -Infinity };
      entry.outline.forEach(ring => {
        if (!Array.isArray(ring)) return;
        ring.forEach(c => {
          if (!Array.isArray(c) || c.length < 2) return;
          const lat = Number(c[0]);
          const lng = Number(c[1]);
          if (!Number.isFinite(lat) || !Number.isFinite(lng)) return;
          if (lat < box.minLat) box.minLat = lat;
          if (lat > box.maxLat) box.maxLat = lat;
          if (lng < box.minLng) box.minLng = lng;
          if (lng > box.maxLng) box.maxLng = lng;
        });
      });

      if (!Number.isFinite(box.minLat) || !Number.isFinite(box.minLng)) return null;
      entry._metroBbox = box;
      return box;
    }

    function metroPolygonKey(entry) {
      const name = entry?.["아파트 이름"] || entry?.aptNm || entry?.name || '';
      return `${normalizeName(name)}|${entry?.sggCd ?? ''}|${entry?.umdNm ?? ''}`;
    }

    function renderMetroPolygonEntry(found) {
      if (!found || !Array.isArray(found.outline)) return;
      found.outline.forEach(ring => {
        if (!Array.isArray(ring) || ring.length < 3) return;
        const path = ring.map(c => new kakao.maps.LatLng(c[0], c[1]));
        const poly = new kakao.maps.Polygon({
          path: path,
          strokeWeight: 2,
          strokeColor: '#007bff',
          strokeOpacity: 0.7,
          strokeStyle: 'solid',
          fillColor: '#007bff',
          fillOpacity: 0.15,
          zIndex: 50
        });
        poly.setMap(map);
        // [v6] blip 점멸을 위해 이 ring의 중심좌표(단순 평균)를 저장해 둔다.
        let sumLat = 0, sumLng = 0, cnt = 0;
        ring.forEach(c => {
          const la = Number(c[0]), ln = Number(c[1]);
          if (Number.isFinite(la) && Number.isFinite(ln)) { sumLat += la; sumLng += ln; cnt++; }
        });
        poly._centroid = cnt ? { lat: sumLat / cnt, lng: sumLng / cnt } : null;
        // [v10] 점멸 거리 판정을 폴리곤 표시 판정과 동일한 '외곽선 최단거리' 기준으로 맞추기 위해
        //       이 ring 좌표를 그대로 저장한다(중심거리 기준이던 v6~v9에서 큰 단지가 누락되던 문제 해결).
        poly._ring = ring;
        // [v11] 라벨(이름창) 점멸을 폴리곤과 동기화하기 위해 이 폴리곤이 속한 단지 데이터(found)도 저장.
        poly._found = found;
        metroPolygonOverlays.push(poly);
        metroPolygons.push(poly);
      });
    }

    function stopMetroRipple() {
      if (metroRippleTimer) { clearInterval(metroRippleTimer); metroRippleTimer = null; }
      for (const c of metroRippleCircles) { try { c.setMap(null); } catch(e) {} }
      metroRippleCircles = [];
    }

    // [v4] '모던 브랜드 블루' 레이더 DOM 요소 생성 (지름 px 지정)
    //  - 점선 동심원 + 십자 크로스 + conic-gradient 회전 스윕 + 스윕 엣지 라인
    //  - [v5] 0×0 래퍼로 감싸 반환: CustomOverlay 앵커(0,0) 원점이 곧 역 좌표가 되고
    //         내부 .metro-radar는 transform: translate(-50%,-50%)로 그 원점에 중앙정렬됨
    function buildMetroRadarElement(diameterPx) {
      const wrap = document.createElement('div');
      wrap.className = 'metro-radar-wrap';
      const el = document.createElement('div');
      el.className = 'metro-radar';
      el.style.width = diameterPx + 'px';
      el.style.height = diameterPx + 'px';
      el.innerHTML =
        '<div class="mr-ring mr-r2"></div>' +
        '<div class="mr-ring mr-r3"></div>' +
        '<div class="mr-ring mr-r4"></div>' +
        '<div class="mr-cross h"></div>' +
        '<div class="mr-cross v"></div>' +
        '<div class="mr-sweep"></div>' +
        '<div class="mr-sweep-line"></div>';
      wrap.appendChild(el);
      return wrap;
    }

    // [v4] 반경(m)을 현재 줌의 화면 px(반지름)로 환산
    //  - projection.containerPointFromCoords로 중심과 북쪽 offset 지점의 픽셀거리를 측정
    function metroRadiusToPixels(centerLatLng, radiusMeters) {
      try {
        const proj = map.getProjection();
        const c = proj.containerPointFromCoords(centerLatLng);
        const north = new kakao.maps.LatLng(
          centerLatLng.getLat() + radiusMeters / 111320,
          centerLatLng.getLng()
        );
        const n = proj.containerPointFromCoords(north);
        return Math.max(2, Math.abs(c.y - n.y));
      } catch(e) {
        return 0;
      }
    }

    // [v4] 줌 변경 시 레이더 크기만 재계산 (위치·다른 요소 불변)
    function resizeMetroRadars() {
      if (!metroRadarOverlays.length) return;
      if (metroCurrentIsAll || !metroCurrentEffectiveRadius) return;
      for (const item of metroRadarOverlays) {
        const d = metroRadiusToPixels(item.center, metroCurrentEffectiveRadius) * 2;
        item.content.style.width = d + 'px';
        item.content.style.height = d + 'px';
      }
    }

    // [v4] 레이더 오버레이 정리
    function clearMetroRadars() {
      for (const item of metroRadarOverlays) { try { item.overlay.setMap(null); } catch(e) {} }
      metroRadarOverlays = [];
    }

    // [v6] 단지 폴리곤 blip 점멸 (역세권 레이더 스윕 각도에 동기)
    //  - 기존: 전 단지를 1200ms 주기로 일괄 점멸
    //  - 변경: 각 정거장 레이더의 스윕 빛(.mr-sweep-line, 4.2초 1회전, 12시=북=0°에서 시계방향)이
    //          단지 중심 방위를 지나는 순간 그 단지를 밝게 켰다가 서서히 흐려지게 한다(시안4 데이터 레이더).
    //  - 한 단지가 여러 정거장 반경에 겹치면 각 역의 빛이 닿을 때마다 각각 점멸한다.
    const METRO_SWEEP_PERIOD_MS = 4200; // 레이더 스윕 1회전 주기(ms). 빛 회전·점멸 판정이 공유.
    // [v9] 모든 레이더가 공유하는 단일 전역 시계.
    //  - v8까지는 CSS 애니메이션이 화면 빛을 돌리고, JS는 그 각도를 '읽어서' 점멸을 맞췄다.
    //    그런데 카카오 CustomOverlay는 화면 밖으로 나가면 DOM에서 분리하고 다시 들어오면 재부착하는데,
    //    CSS 애니메이션은 재부착 시 0도(12시)부터 다시 시작된다 → 화면에 막 들어온 레이더의 빛이
    //    전역 위상과 어긋나고, 그 정거장 기준 단지 점멸도 따라서 어긋났다.
    //  - v9: 빛(transform 회전)과 점멸을 모두 '리셋되지 않는 단일 전역 시계'로 구동한다.
    //    CSS animation을 없애고(=재부착 초기화 원인 제거) JS가 매 프레임 모든 레이더의
    //    .mr-sweep / .mr-sweep-line transform을 같은 각도로 직접 돌린다 → 빛과 점멸 위상이 구조적으로 일치.
    let metroSweepEpoch = null; // 최초 1회 고정, 이후 절대 리셋 안 함
    function metroSweepAngleNow(now) {
      if (metroSweepEpoch === null) metroSweepEpoch = now;
      return (((now - metroSweepEpoch) % METRO_SWEEP_PERIOD_MS) / METRO_SWEEP_PERIOD_MS) * 360;
    }

    // [v9] 모든 레이더의 스윕 빛을 전역 각도로 회전시킨다(화면 안 레이더만 DOM에 있으므로 그것만 갱신됨).
    function metroDriveRadarSweep(angleDeg) {
      for (const item of metroRadarOverlays) {
        const el = item.content;
        if (!el) continue;
        const sweep = el.querySelector('.mr-sweep');
        const line  = el.querySelector('.mr-sweep-line');
        // .mr-sweep: inset:0, 중심 회전 → 그대로 rotate
        if (sweep) sweep.style.transform = `rotate(${angleDeg}deg)`;
        // .mr-sweep-line: transform-origin: bottom center → 중심 기준 rotate (translate 불필요)
        if (line)  line.style.transform  = `rotate(${angleDeg}deg)`;
      }
    }

    // [v7] 화면상 시각적 방위(북=0°, 시계방향)를 계산.
    //  - 메르카토르 지도에서 눈에 보이는 각도와 맞추려면 경도차에 cos(위도) 보정을 넣어
    //    수평거리를 화면 비율로 환산해야 한다. (이전 v6의 구면 공식은 위도 보정이 빠져
    //    동서 성분이 과대평가 → 방위가 수 도 틀어졌음)
    function metroBearingDeg(fromLat, fromLng, toLat, toLng) {
      const toRad = Math.PI / 180;
      const east  = (toLng - fromLng) * Math.cos(((fromLat + toLat) / 2) * toRad); // 동(+) 성분
      const north = (toLat - fromLat);                                            // 북(+) 성분
      let deg = Math.atan2(east, north) / toRad; // 북0°, 동90°, 시계방향
      return (deg + 360) % 360;
    }

    function startPolygonPulse() {
      if (polygonPulseFrame !== null) return; // 이미 실행 중

      // 각 폴리곤이 어떤 정거장으로부터 몇 도 방향인지 미리 계산 (반경 내인 역만)
      // bindings: [{ poly, level(현재 밝기 0~1) }], targets: poly별 {stationIdx, bearing}
      const radius = metroCurrentEffectiveRadius;
      const stations = metroRadarOverlays.map(it => ({
        lat: it.center.getLat(), lng: it.center.getLng()
      }));

      // [v12] 라벨(이름창) 매칭: renderStationEffectsForCombined에서 각 라벨에 새긴 dataset.metroKey로
      //  key→labelEl 맵을 만들어 둔다. (v11의 findPolygonForApt 우회 매칭이 실패하던 문제 해결)
      const labelByKey = new Map();
      for (const d of drawn) {
        try {
          const el = d.overlay?.getContent();
          const k = el?.dataset?.metroKey;
          if (k) labelByKey.set(k, el);
        } catch(e) {}
      }

      // poly마다 닿는 역들의 방위 목록을 만든다.
      const entries = [];
      for (const poly of metroPolygons) {
        const c = poly._centroid;
        if (!c) continue;
        const bearings = [];
        for (const s of stations) {
          // [v10] 점멸 거리 판정을 폴리곤 표시 판정과 동일하게 '외곽선 최단거리 ≤ 반경'으로 맞춘다.
          //  - v6~v9는 중심거리×1.25로 걸렀는데, 큰 단지는 외곽선이 반경 안이어도 중심이 멀어
          //    폴리곤은 그려지지만 점멸은 누락됐다. 이제 ring 외곽선 최단거리로 판정해 정확히 일치.
          //  - 방위(어느 쪽을 비추는지)는 시각적으로 자연스러운 단지 중심(centroid) 기준 유지.
          if (radius && poly._ring) {
            if (stationToComplexDistance(s.lat, s.lng, [poly._ring]) > radius) continue;
          } else if (radius) {
            if (getDistanceMeters(s.lat, s.lng, c.lat, c.lng) > radius * 1.25) continue;
          }
          bearings.push(metroBearingDeg(s.lat, s.lng, c.lat, c.lng));
        }
        // [v12] 이 폴리곤이 속한 단지의 라벨을 폴리곤 키로 찾는다(동일 키 기준이라 확실히 매칭).
        const labelEl = poly._found ? (labelByKey.get(metroPolygonKey(poly._found)) || null) : null;
        entries.push({ poly, bearings, level: 0, labelEl });
      }

      const FILL_BASE = 0.12, FILL_PEAK = 0.42;   // 점멸 시 채움 0.12 → 0.42
      const STROKE_BASE = 0.50, STROKE_PEAK = 1.0; // 점멸 시 외곽 0.50 → 1.0
      const DECAY = 0.94; // 프레임당 감쇠(서서히 흐려짐)
      let prevAngle = null; // 첫 프레임엔 직전 각도가 없으므로 점등 판정 건너뜀

      // [v14] 라벨 점멸을 '원래 stationNearbyPulse 글로우' 모양으로 복원하되 타이밍만 레이더 동기.
      //  원래 키프레임:
      //    레벨0(평상): box-shadow: 0 4px 12px rgba(0,0,0,0.15)
      //    레벨1(피크): box-shadow: 0 4px 12px rgba(0,123,255,0.45), 0 0 0 5px rgba(0,123,255,0.15)
      //  → 두 상태를 레벨(0~1)로 보간해서 매 프레임 box-shadow로 적용.
      //  단, .aptLabel의 transition: box-shadow 0.2s 가 매 프레임 갱신을 묻어버리므로(=v12에서 안 보이던 원인)
      //  점멸 중에는 해당 라벨의 box-shadow transition만 꺼서 즉시 반영되게 한다(step에서 처리).
      function metroLabelShadow(lv) {
        // 그림자 색: 검정(0,0,0) → 파랑(0,123,255) 보간, 알파 0.15 → 0.45
        const r = Math.round(0   + (0   - 0)   * lv); // 0
        const g = Math.round(0   + (123 - 0)   * lv);
        const b = Math.round(0   + (255 - 0)   * lv);
        const shA = (0.15 + 0.30 * lv).toFixed(3);
        // 외곽 글로우 링: 0 → 5px, 알파 0 → 0.15
        const ringPx = (5 * lv).toFixed(2);
        const ringA  = (0.15 * lv).toFixed(3);
        return `0 4px 12px rgba(${r},${g},${b},${shA}), 0 0 0 ${ringPx}px rgba(0,123,255,${ringA})`;
      }

      function step(now) {
        if (!isStationMode) {
          polygonPulseFrame = null;
          return;
        }
        // [v9] 빛 회전과 점멸을 동일한 전역 시계로 구동(요소 읽기 없음 → 재부착 초기화 영향 없음).
        const curAngle = metroSweepAngleNow(now);
        metroDriveRadarSweep(curAngle); // 화면 안 레이더 빛을 전역 각도로 회전(폴리곤 유무와 무관)

        if (prevAngle !== null) {
          // [v11] 같은 단지가 여러 ring으로 쪼개진 경우 라벨은 하나뿐이므로, 라벨별 최대 레벨을 모아 한 번만 적용.
          const labelLevels = new Map();
          for (const e of entries) {
            // 스윕이 이 단지 방위를 이번 프레임에 지났으면 점등(level=1)
            let passed = false;
            for (const b of e.bearings) {
              const inArc = (prevAngle <= curAngle)
                ? (b > prevAngle && b <= curAngle)
                : (b > prevAngle || b <= curAngle); // 360→0 경계 처리
              if (inArc) { passed = true; break; }
            }
            if (passed) e.level = 1;
            else e.level *= DECAY; // 서서히 흐려짐

            const lv = e.level;
            const fillOp   = FILL_BASE   + (FILL_PEAK   - FILL_BASE)   * lv;
            const strokeOp = STROKE_BASE + (STROKE_PEAK - STROKE_BASE) * lv;
            try { e.poly.setOptions({ fillOpacity: fillOp, strokeOpacity: strokeOp }); } catch(err) {}

            if (e.labelEl) {
              const prev = labelLevels.get(e.labelEl);
              if (prev === undefined || lv > prev) labelLevels.set(e.labelEl, lv);
            }
          }
          // 라벨에 점등 레벨 적용 ([v14] 원래 글로우 모양 box-shadow를 레이더 타이밍으로)
          for (const [el, lv] of labelLevels) {
            try {
              // [v14] box-shadow transition을 빼서 매 프레임 즉시 반영(background/transform transition은 유지)
              el.style.transition = 'background-color 0.3s ease, transform 0.2s ease';
              el.style.boxShadow = metroLabelShadow(lv);
            } catch(err) {}
          }
        }

        prevAngle = curAngle;
        polygonPulseFrame = requestAnimationFrame(step);
      }
      polygonPulseFrame = requestAnimationFrame(step);
    }

    function stopPolygonPulse() {
      if (polygonPulseFrame !== null) {
        cancelAnimationFrame(polygonPulseFrame);
        polygonPulseFrame = null;
      }
      metroPolygons = [];
    }

    function clearMetroPolygons() {
      stopPolygonPulse();
      for (const item of metroPolygonOverlays) { try { item.setMap(null); } catch(e) {} }
      metroPolygonOverlays = [];
    }

    function clearMetroOverlays() {
      stopMetroRipple();
      clearMetroRadars();
      clearMetroPolygons();
      // [v11] 점멸로 라벨에 남은 inline 글로우(boxShadow) 일괄 제거.
      try {
        for (const d of drawn) {
          const el = d.overlay?.getContent();
          if (el && el.style) {
            if (el.style.boxShadow) el.style.boxShadow = '';
            if (el.style.outline) { el.style.outline = ''; el.style.outlineOffset = ''; } // [v13]
            if (el.style.transition) el.style.transition = ''; // [v14] 원래 CSS transition 복원
          }
        }
      } catch(e) {}
      for (const item of metroStaticOverlays) { try { item.setMap(null); } catch(e) {} }
      metroStaticOverlays = [];
      metroCurrentCandidateApts = [];
      metroCurrentCandidateAptKeySet = new Set();
      metroCurrentCandidatePolygons = [];
      metroCurrentPolygonData = [];
    }

    function runOneRippleCycle(positions, targetRadius, color) {
      // [v14_7] Circle 객체를 매 사이클 새로 만들지 않고 재사용
      // — 큰 SVG element가 setMap(null)로 DOM에서 제거될 때 터치 이벤트 target이 사라져
      //   드래그가 캔슬되던 문제 해결
      let circles;
      if (metroRippleCircles.length === positions.length) {
        // 재사용: 위치는 동일하므로 radius·opacity만 초기화
        circles = metroRippleCircles;
        for (const c of circles) {
          try {
            c.setRadius(1);
            c.setOptions({ fillOpacity: 0.25, strokeOpacity: 0.55 });
          } catch(e) {}
        }
      } else {
        // 첫 호출 또는 개수 불일치: 기존 제거 후 새로 생성
        for (const c of metroRippleCircles) { try { c.setMap(null); } catch(e) {} }
        metroRippleCircles = [];
        circles = positions.map(pos => {
          const circle = new kakao.maps.Circle({
            center: pos,
            radius: 1,
            strokeWeight: 2,
            strokeColor: color,
            strokeOpacity: 0.55,
            fillColor: color,
            fillOpacity: 0.25
          });
          circle.setMap(map);
          return circle;
        });
        metroRippleCircles = circles;
      }

      const duration = 900;
      const startTime = performance.now();
      // [v14_8a] 드래그 일시정지 보정용
      let pausedDuration = 0;
      let dragPauseAt = 0;

      function step(now) {
        if (!isStationMode) return; // 모드 해제됨

        // [v14_8a] 드래그 중: progress 일시정지 (Circle 옵션 변경 X → SVG transform과 함께 이동)
        if (isMapDragging) {
          if (dragPauseAt === 0) dragPauseAt = now;
          requestAnimationFrame(step);
          return;
        } else if (dragPauseAt > 0) {
          // 드래그 종료: 멈춰있던 시간만큼 보정
          pausedDuration += (now - dragPauseAt);
          dragPauseAt = 0;
        }

        const elapsed = now - startTime - pausedDuration;
        const progress = Math.min(elapsed / duration, 1);
        const eased = 1 - Math.pow(1 - progress, 3);

        for (const circle of circles) {
          circle.setRadius(targetRadius * eased);
          circle.setOptions({
            fillOpacity: 0.25 * (1 - progress * 0.85),
            strokeOpacity: 0.55 * (1 - progress * 0.75)
          });
        }

        if (progress < 1) {
          requestAnimationFrame(step);
        } else {
          // [v14_7] 사이클 끝: setMap(null) 대신 opacity 0으로만
          // — DOM element는 유지 → 터치 이벤트 target이 사라지지 않음
          for (const c of circles) {
            try { c.setOptions({ fillOpacity: 0, strokeOpacity: 0 }); } catch(e) {}
          }
        }
      }
      requestAnimationFrame(step);
    }

    function refreshMetroViewportRendering() {
      if (!isStationMode) return;
      renderCombinedAptMarkersAndEffects();
    }

    async function showMetroStations() {
      const seq = ++metroRenderSeq;

      // 기존 오버레이 전부 제거
      clearMetroOverlays();
      clearDrawn();

      const data = await loadMetroData();
      const polygonData = await loadPolygonData();
      if (seq !== metroRenderSeq || !isStationMode) return;
      if (!data || !data.length) return;

      const stationColor = '#007bff';

      // 버튼 상태를 직접 읽어 metroRadius와 실제 분기를 일치시킨다.
      // [index_20_1] 아무 거리 버튼도 선택 안 된 미선택(null)은 '전체'로 취급한다.
      const selectedDistRaw = document.querySelector('.stationDistBtn.selected')?.dataset?.dist
        || (metroRadius === null ? 'all' : String(metroRadius));
      const isMetroAll = selectedDistRaw === 'all';
      const effectiveMetroRadius = isMetroAll ? null : Number(selectedDistRaw);
      if (!isMetroAll && (!Number.isFinite(effectiveMetroRadius) || effectiveMetroRadius <= 0)) return;

      // [index_20_1] 미선택(null)은 '전체'처럼 렌더링하되 상태값 자체는 null로 유지한다.
      //   (메인 버튼 3단계 사이클에서 '미선택'과 '전체 명시 선택'을 구분해야 하므로)
      if (metroRadius !== null) metroRadius = isMetroAll ? 'all' : effectiveMetroRadius;
      metroCurrentIsAll = isMetroAll;
      metroCurrentEffectiveRadius = effectiveMetroRadius;
      metroCurrentPolygonData = polygonData;

      const positions = [];
      const stationCoords = [];

      for (const station of data) {
        const lat = pick(station, ['위도', 'lat', 'Lat']);
        const lng = pick(station, ['경도', 'lng', 'Lng']);
        const name = pick(station, ['아파트 이름', 'name', 'aptNm']) || '';
        if (lat == null || lng == null) continue;

        const pos = new kakao.maps.LatLng(Number(lat), Number(lng));
        positions.push(pos);
        stationCoords.push({ lat: Number(lat), lng: Number(lng) });

        // '전체'는 거리 반경이 아니므로 100~500m 선택 때만 고정 반경 원을 표시한다.
        if (!isMetroAll) {
          const baseCircle = new kakao.maps.Circle({
            center: pos,
            radius: effectiveMetroRadius,
            strokeWeight: 1.5,
            strokeColor: stationColor,
            strokeOpacity: 0.30,
            fillColor: stationColor,
            fillOpacity: 0.08
          });
          baseCircle.setMap(map);
          metroStaticOverlays.push(baseCircle);
        }

        // 역 마커
        const markerSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="7" fill="${stationColor}" stroke="white" stroke-width="2.5"/></svg>`;
        const markerUrl = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(markerSvg);
        const markerImg = new kakao.maps.MarkerImage(markerUrl, new kakao.maps.Size(20, 20), { offset: new kakao.maps.Point(10, 10) });

        const marker = new kakao.maps.Marker({
          position: pos,
          image: markerImg,
          zIndex: 100
        });
        marker.setMap(map);
        metroStaticOverlays.push(marker);

        // 역 이름 라벨
        const labelDiv = document.createElement('div');
        labelDiv.className = 'metroLabel';
        labelDiv.textContent = name;

        const label = new kakao.maps.CustomOverlay({
          position: pos,
          content: labelDiv,
          xAnchor: 0.5,
          yAnchor: 0,
          zIndex: 99
        });
        label.setMap(map);
        metroStaticOverlays.push(label);
      }

      // 논리 후보군 계산
      // - 전체: apt_coor.json 전체 대상
      // - 100~500m: 기존 거리 판정 대상
      metroCurrentCandidateApts = isMetroAll ? APTS.slice() : APTS.filter(a => {
        const polyEntry = polygonData.length ? findPolygonForApt(polygonData, a) : null;
        if (polyEntry && Array.isArray(polyEntry.outline) && polyEntry.outline.length > 0) {
          return stationCoords.some(s =>
            stationToComplexDistance(s.lat, s.lng, polyEntry.outline) <= effectiveMetroRadius
          );
        }
        return stationCoords.some(s => getDistanceMeters(a.lat, a.lng, s.lat, s.lng) <= effectiveMetroRadius);
      });
      metroCurrentCandidateAptKeySet = new Set(metroCurrentCandidateApts.map(aptIdentityKey));

      // 폴리곤 후보군 계산
      // - 전체: polygon.json 전체 대상
      // - 100~500m: 거리 조건을 통과한 아파트와 매칭되는 polygon만 대상
      if (isMetroAll) {
        metroCurrentCandidatePolygons = Array.isArray(polygonData) ? polygonData.slice() : [];
      } else {
        const renderedKeys = new Set();
        metroCurrentCandidatePolygons = [];
        metroCurrentCandidateApts.forEach(apt => {
          const found = findPolygonForApt(polygonData, apt);
          if (!found || !Array.isArray(found.outline)) return;
          const key = metroPolygonKey(found);
          if (renderedKeys.has(key)) return;
          renderedKeys.add(key);
          metroCurrentCandidatePolygons.push(found);
        });
      }

      // [v6] 레이더 오버레이를 viewport 렌더링보다 먼저 생성한다.
      //  - startPolygonPulse가 metroRadarOverlays(역 좌표)를 읽어 blip 방위를 계산하므로
      //    첫 렌더(refreshMetroViewportRendering) 시점에 이미 존재해야 한다.
      // '전체'는 거리 반경이 아니므로 역 주변 반경 시각화(레이더)를 만들지 않는다.
      if (!isMetroAll) {
        // [v4] ripple(확산 원) 대신 '모던 브랜드 블루' 레이더 오버레이를 역마다 배치
        // [v5] 0×0 래퍼 + 앵커(0,0) → 래퍼 원점이 역 좌표, 내부 레이더는 CSS로 중앙정렬
        for (const pos of positions) {
          const d = metroRadiusToPixels(pos, effectiveMetroRadius) * 2;
          const wrap = buildMetroRadarElement(d);
          const radarEl = wrap.querySelector('.metro-radar'); // 리사이즈 대상(내부 요소)
          const overlay = new kakao.maps.CustomOverlay({
            position: pos,
            content: wrap,
            xAnchor: 0,
            yAnchor: 0,
            zIndex: 60
          });
          overlay.setMap(map);
          metroRadarOverlays.push({ overlay, center: pos, content: radarEl });
        }
      }

      // 실제 렌더링은 현재 화면 + 20% 여유 영역만 수행한다.
      refreshMetroViewportRendering();

      const rangeText = isMetroAll ? '전체' : `${effectiveMetroRadius}m`;
      const combinedCount = getCombinedAptCandidates().length;
      toast(`${rangeText} · 역세권 후보 ${metroCurrentCandidateApts.length}개 · 교집합 ${combinedCount}개 · 화면 ${drawn.length}개 표시됨`, 1500);
    }

    // 두 좌표 간 거리(m) — Haversine 공식
    function getDistanceMeters(lat1, lng1, lat2, lng2) {
      const R = 6371000;
      const toRad = v => v * Math.PI / 180;
      const dLat = toRad(lat2 - lat1);
      const dLng = toRad(lng2 - lng1);
      const a = Math.sin(dLat / 2) ** 2
              + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2;
      return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    }

    // [NEW v14_6] 점이 단일 폴리곤(ring) 내부에 있는지 — ray casting
    //   ring: [[lat, lng], [lat, lng], ...] (닫힌 다각형, 마지막=처음 점이 같아도 OK)
    function pointInPolygon(lat, lng, ring) {
      let inside = false;
      for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
        const xi = ring[i][0], yi = ring[i][1];
        const xj = ring[j][0], yj = ring[j][1];
        const intersect = ((yi > lng) !== (yj > lng))
          && (lat < (xj - xi) * (lng - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
      }
      return inside;
    }

    // [NEW v14_6] 점에서 선분 AB까지 최단거리(m)
    //   평면 근사로 t-파라미터 구한 뒤 투영점에 Haversine 적용
    //   (단지 크기 수백 m 범위에서 평면 근사 오차 ~0.01% 이하)
    function pointToSegmentDistanceMeters(plat, plng, alat, alng, blat, blng) {
      const dx = blat - alat, dy = blng - alng;
      const l2 = dx * dx + dy * dy;
      if (l2 === 0) return getDistanceMeters(plat, plng, alat, alng);
      let t = ((plat - alat) * dx + (plng - alng) * dy) / l2;
      if (t < 0) t = 0; else if (t > 1) t = 1;
      return getDistanceMeters(plat, plng, alat + t * dx, alng + t * dy);
    }

    // [NEW v14_6] 정거장 → 단지(다중 폴리곤) 최단거리(m)
    //   outline: [[ring1], [ring2], ...] — 도로로 분리된 단지 대응
    //   - 정거장이 어떤 ring 내부에 있으면 즉시 0 반환
    //   - 모든 ring의 모든 변에 대한 점-선분 최단거리 중 최솟값
    //   - ring이 모두 비정상(2점 이하)이면 Infinity 반환 → 호출부에서 점 기반 fallback
    function stationToComplexDistance(stationLat, stationLng, outline) {
      let minDist = Infinity;
      for (const ring of outline) {
        if (!Array.isArray(ring) || ring.length < 3) continue;
        if (pointInPolygon(stationLat, stationLng, ring)) return 0;
        for (let i = 0; i < ring.length; i++) {
          const j = (i + 1) % ring.length;
          const d = pointToSegmentDistanceMeters(
            stationLat, stationLng,
            ring[i][0], ring[i][1],
            ring[j][0], ring[j][1]
          );
          if (d < minDist) minDist = d;
        }
      }
      return minDist;
    }

    // White -> Mint (apt: 0,255,204)
    function getBgColorApt(count, max) {
        if (!max || max <= 0) return 'rgba(255, 255, 255, 0.95)';
        const ratio = Math.min(count / max, 1);
        const r = Math.floor(255 - (255 * ratio));
        const g = 255; 
        const b = Math.floor(255 - (51 * ratio)); 
        return `rgba(${r}, ${g}, ${b}, 0.95)`;
    }

    // White -> Orange (silv: 255,174,0)
    function getBgColorSilv(count, max) {
        if (!max || max <= 0) return 'rgba(255, 255, 255, 0.95)';
        const ratio = Math.min(count / max, 1);
        const r = 255;
        const g = Math.floor(255 - (81 * ratio));
        const b = Math.floor(255 - (255 * ratio));
        return `rgba(${r}, ${g}, ${b}, 0.95)`;
    }

    /* ===== [라벨 글자수 제한 설정] =====
       카카오맵 level은 작을수록 확대, 클수록 축소.
       아래 두 상수를 바꾸면 언제 / 몇 글자로 자를지 손쉽게 조정 가능.
       - LABEL_LEN_LIMIT_LEVEL : "이 level 이상"부터 자르기 시작 (기본 5)
       - LABEL_LEN_LIMIT_CHARS : 잘릴 때 최대 글자수 (기본 6, 공백 포함)
    ============================================ */
    const LABEL_LEN_LIMIT_LEVEL = 5;
    const LABEL_LEN_LIMIT_CHARS = 6;

    /* ===== [24_3] 거래량 기반 줌-단계 라벨 노출 (베이스/무필터 모드 전용) =====
       - 떡칠 완화: 줌을 뺄수록(레벨↑) 최근 거래량 높은 단지만 노출. 확대(레벨↓)하면 전부 표시.
       - 거래 건수는 loadAptTrendData가 미리 집계한 aptTradeCntMap(최근 24개월) 사용 → 데이터 추가/지연 없음.
       - 베이스 모드는 idle에서 다시 그려지므로 drawMarkers 한 곳만 적용해도 줌에 자동 반응.
       - 아래 임계값(min)이 유일한 조정 손잡이. 화면 보며 숫자만 바꾸면 됨. (level 내림차순 유지) */
    const LABEL_MIN_TRADE_TIERS = [
      { level: 8, min: 100 },   // 매우 축소: 최근 거래 28건 이상만
      { level: 7, min: 75 },
      { level: 6, min: 50 },
      { level: 5, min: 25 },    // 살짝 축소: 최근 거래 3건 이상만
    ]; // level 4 이하(확대)는 어디에도 안 걸려 전부 표시
    function labelMinTradeForLevel(level) {
      for (const t of LABEL_MIN_TRADE_TIERS) { if (level >= t.level) return t.min; }
      return 0;
    }
    function aptRecentTradeCount(apt) {
      const k = normalizeName(apt?.aptNm) + '|' + (apt?.sggCd == null ? '' : String(Number(apt.sggCd)));
      return aptTradeCntMap[k] || 0;
    }
    // 베이스(무필터) 상태에서만 줌-노출 필터 적용 — 거래량/필터/역세권/학군 모드는 영향 없음
    function isLabelDeclutterActive() {
      return !isTransactionMode && !isSchoolMode && !isStationMode && !hasAnyCombinedFilter();
    }
    function shouldShowAptLabel(apt, level) {
      if (!isLabelDeclutterActive()) return true;   // 베이스 모드 아니면 전부 표시(기존 동작)
      if (!aptTrendLoaded) return true;             // 거래량 데이터 아직/실패 → 숨기지 않음(안전)
      const need = labelMinTradeForLevel(level);
      if (need <= 0) return true;                   // 확대 상태: 전부 표시
      return aptRecentTradeCount(apt) >= need;
    }

    function truncateAptName(name, level) {
      const n = String(name ?? '');
      if (level >= LABEL_LEN_LIMIT_LEVEL && n.length > LABEL_LEN_LIMIT_CHARS) {
        return n.substring(0, LABEL_LEN_LIMIT_CHARS);
      }
      return n;
    }

    // 줌 변경 시 기존 라벨들의 이름 부분만 즉시 갱신
    // (new-badge / count-badge / bgColor 등 다른 요소는 건드리지 않음)
    kakao.maps.event.addListener(map, 'zoom_changed', () => {
      const level = map.getLevel();
      for (const d of drawn) {
        try {
          const el = d.overlay?.getContent();
          if (!el) continue;
          const origName = el.dataset?.aptnm;
          if (!origName) continue;
          const nameSpan = el.querySelector('.apt-name-text');
          if (nameSpan) {
            // [24_3] 표기 이름(dispnm) 있으면 그걸, 없으면 원본을 truncateAptName으로 — 줌 절단 동일 적용
            const dispnm = el.dataset?.dispnm;
            nameSpan.textContent = truncateAptName((dispnm != null) ? dispnm : origName, level);
          }
        } catch(e) {}
      }
    });

    // [v4] 줌 변경 시 역세권 레이더 크기 재계산 (역세권 모드일 때만)
    kakao.maps.event.addListener(map, 'zoom_changed', () => {
      if (isStationMode) resizeMetroRadars();
    });

    /* ===== [30_6] 지도 이름창 위 제스처 통과 (핀치 줌 · 한 손가락 드래그) =====
       [문제] 30_5까지 아파트 이름창(.aptLabel)은 touchstart를 stopPropagation으로 전면 차단했다.
              카카오 지도의 터치 핸들러는 #map 컨테이너(=라벨의 조상)에 버블 단계로 걸려 있어,
              손가락이 이름창 위에 닿는 순간 지도가 그 터치를 아예 보지 못한다.
              → 두 손가락 중 하나만 이름창 위여도 터치 세션이 시작되지 않아 핀치 줌이 성립하지 않고,
                한 손가락 드래그(화면 이동)도 막혔다. '라벨 없는 빈 공터에서만 확대/축소가 되던' 원인.
       [해결] touchstart를 막지 않고 지도로 흘려보낸다. 대신 '탭이냐 제스처냐' 판정을 click 시점으로
              미뤄, 이동이 LABEL_TAP_SLOP를 넘었거나 손가락이 2개 이상이었으면 패널/팝업을 열지 않는다.
       [적용 범위] 기본 지도 이름창(drawMarkers) · 대장 라벨(daejangDrawGroup) · 대장 계보 팝업(daejangShowPopup).
              마우스(mousedown 차단)는 기존 그대로 둔다 — 데스크톱은 휠 줌이 이미 라벨 위에서 정상 동작하고,
              라벨에서 시작하는 드래그를 막는 것은 의도된 기존 동작이므로 무변경.
       'gesture' = 신규 기본 / 'legacy' = 30_5 이전 동작(전면 차단 — 기존 리스너 줄이 그대로 살아 있음) */
    const LABEL_GESTURE = 'gesture';
    const LABEL_TAP_SLOP = 10;        // 이 px를 넘게 움직이면 탭이 아니라 제스처로 본다

    let lblTapX = 0, lblTapY = 0;
    let lblTapMoved = false;          // 한 손가락 이동이 슬롭을 넘었나
    let lblTapMulti = false;          // 손가락이 2개 이상이었나(=핀치)
    let lblTapOnLabel = false;        // 이번 터치가 라벨/팝업 위에서 시작됐나 (지도 click 억제용)

    function labelGestureStart(e) {
      lblTapOnLabel = true;
      const ts = e.touches;
      if (!ts || ts.length !== 1) { lblTapMulti = true; return; }
      lblTapMulti = false;
      lblTapMoved = false;
      lblTapX = ts[0].clientX;
      lblTapY = ts[0].clientY;
    }

    function labelGestureMove(e) {
      const ts = e.touches;
      if (!ts || !ts.length) return;
      if (ts.length !== 1) { lblTapMulti = true; return; }
      if (Math.abs(ts[0].clientX - lblTapX) > LABEL_TAP_SLOP ||
          Math.abs(ts[0].clientY - lblTapY) > LABEL_TAP_SLOP) lblTapMoved = true;
    }

    /* click 핸들러 선두에서 1회 소비 — true면 제스처였으므로 패널/팝업을 열지 않는다.
       legacy에서는 항상 false(터치가 애초에 차단되어 플래그가 서지 않지만 명시적으로 막아 둔다). */
    function labelGestureConsumed() {
      if (LABEL_GESTURE === 'legacy') return false;
      const gesture = lblTapMoved || lblTapMulti;
      lblTapMoved = false;
      lblTapMulti = false;
      return gesture;
    }

    /* 대장 라벨/팝업이 clickable:false가 되면서 그 위의 탭도 지도 click으로 올라온다.
       라벨/팝업에서 시작된 터치의 지도 click만 1회 무시 → '팝업이 열리자마자 닫히는' 회귀 방지.
       (기본 지도 라벨은 지도 click 리스너가 대장 모드에서만 동작하므로 원래 무영향) */
    function labelGestureBlocksMapClick() {
      if (LABEL_GESTURE === 'legacy') return false;
      if (!lblTapOnLabel) return false;
      lblTapOnLabel = false;
      return true;
    }

    function bindLabelGesture(el) {
      el.addEventListener('touchstart', labelGestureStart, { passive: true });
      el.addEventListener('touchmove', labelGestureMove, { passive: true });
    }

    /* 라벨 밖(빈 지도)에서 시작한 터치는 억제 플래그를 내린다.
       캡처 단계라 라벨 자신의 touchstart(버블)보다 먼저 실행된다 → 내렸다가 라벨이 다시 올린다.
       기존 학구도 통학로 리스너(mapContainer capture)와 같은 방식이라 서로 간섭하지 않는다. */
    if (LABEL_GESTURE !== 'legacy') {
      mapContainer.addEventListener('touchstart', () => { lblTapOnLabel = false; },
        { passive: true, capture: true });
    }

    function drawMarkers(targetApts, countMap = {}, countMapApt = {}, countMapSilv = {}, newAptSet = new Set()) {
        clearDrawn();
        let maxCount = 0;
        if(Object.keys(countMap).length > 0) {
            maxCount = Math.max(...Object.values(countMap));
        }

        const currentLevel = map.getLevel();

        for(const a of targetApts){
            const pos = new kakao.maps.LatLng(a.lat, a.lng);
            const normName = normalizeName(a.aptNm);
            const count = countMap[normName] || 0;
            const aptCount = countMapApt[normName] || 0;
            const silvCount = countMapSilv[normName] || 0;
            const isNew = newAptSet.has(normName);
            // [26_8] 분양 중 판정 1회 계산(분양 배지/크레인 공용). 키 형식은 트렌드 키와 동일('정규화이름|시군구코드').
            const isPresale = aptTrendLoaded && presaleAptKeys.has(normName + '|' + (a.sggCd == null ? '' : String(Number(a.sggCd))));

            let labelHtml = '';
            if (isNew) {
                labelHtml += '<span class="new-badge">new</span>';
            }
            // [26_8→26_11] 분양 중 단지면 라벨 우상단 '분양' 배지 — PRESALE_LABEL_STYLE에 'badge' 포함 시.
            //   (26_11에서 값이 'badge+spark' 조합형이 되어 정확일치 → includes로 변경. 절대배치라 삽입 순서는 표시 위치에 무관.)
            if (PRESALE_LABEL_STYLE.includes('badge') && isPresale) {
                labelHtml += '<span class="bunyang-badge">분양</span>';
            }
            // [24_3] 표기 이름(dispNm) 있으면 그걸, 없으면 aptNm을 라벨로. 둘 다 동일하게 줌 6글자 절단 적용.
            //        지도 라벨 전용 — 데이터 조회(aptNm)엔 무관.
            const labelName = truncateAptName((a.dispNm != null) ? a.dispNm : a.aptNm, currentLevel);
            labelHtml += `<span class="apt-name-text">${escapeHtml(labelName)}</span>`;
            if (count > 0) {
                labelHtml += `<span class="count-badge">(${count}건)</span>`;
            }

            let bgColor;
            let labelTextColor = null; // [v14_9] null이면 CSS 디폴트 사용
            if (isTransactionMode && count > 0) {
                // [26_12] 색 채우기 손잡이 — false(기본)면 흰색 고정. 분기 구조는 유지해야
                //   아래 브랜드 분기(selectedBrands — 거래량 진입 시 선택 유지됨)로 색이 새어나가지 않음.
                if (!TX_LABEL_FILL) {
                    bgColor = 'rgba(255, 255, 255, 0.95)';
                } else if (silvCount > 0 && aptCount === 0) {
                    bgColor = getBgColorSilv(silvCount, maxCount);
                } else if (aptCount > 0 && silvCount === 0) {
                    bgColor = getBgColorApt(aptCount, maxCount);
                } else {
                    // 둘 다 있으면 더 많은 쪽 색상 사용
                    bgColor = aptCount >= silvCount
                      ? getBgColorApt(count, maxCount)
                      : getBgColorSilv(count, maxCount);
                }
            } else if (selectedBrands.size > 0) {
                // [v14_9] 브랜드 모드: 해당 아파트의 브랜드 색상 적용
                const brand = getAptBrand(a.aptNm);
                const brandColor = BRAND_COLORS[brand];
                if (brandColor) {
                    bgColor = brandColor;
                    labelTextColor = getContrastColor(brandColor);
                } else {
                    bgColor = 'rgba(255, 255, 255, 0.95)';
                }
            } else {
                bgColor = 'rgba(255, 255, 255, 0.95)';
            }

            // [26_12] new 라벨은 최전면(+10000) — 겹침 시 다른 라벨에 가려 바운스 효과가 반감되는 것 방지.
            //   한 단지 기간 내 거래가 1만 건을 넘지 않으므로 new는 항상 일반(6+count)보다 위. new끼리는 기존처럼 건수 순.
            const zIdx = (isNew ? 10006 : 6) + count;

            const marker = new kakao.maps.Marker({ position: pos, image: dotImg, zIndex: 5 });
            /* marker.setMap(map); */

            const contentDiv = document.createElement('div');
            contentDiv.className = 'aptLabel';
            contentDiv.innerHTML = labelHtml;
            contentDiv.style.backgroundColor = bgColor;
            if (labelTextColor) contentDiv.style.color = labelTextColor; // [v14_9] 브랜드 모드 글씨 색
            // [index_20_2] 색이 칠해지지 않는 기본 흰색 라벨(=첫 접속/역세권/초등 등)일 때만
            //   84타입·최근12개월 시세 추이를 배경 스파크라인으로 깐다.
            //   (거래량/브랜드 색 라벨은 색 자체가 의미를 가지므로 추세선을 넣지 않음)
            // [index_20_5] 미니 트렌드 표시 여부는 miniTrendOn 토글이 결정 (필터 색 라벨 위에도 표시 가능)
            applyTrendBgToLabel(contentDiv, a);
            contentDiv.title = '클릭하여 동별 · 평형별 거래 보기';
            contentDiv.dataset.aptnm = a.aptNm; // 줌 변경 시 이름 복원용 원본 보존 (데이터 조회 키 아님, 무수정)
            if (a.dispNm != null) contentDiv.dataset.dispnm = a.dispNm; // [24_2] 표기 이름 있으면 줌과 무관하게 그대로 표기

            // [26_7→26_8] 분양 중 단지 크레인 표시 — PRESALE_LABEL_STYLE==='crane'일 때만(기본 'badge'에선 미호출, 코드 보존).
            //   판정은 위에서 1회 계산한 isPresale 재사용. 크레인은 pointer-events:none 자식이라 클릭/줌이름갱신/배경 스파크라인에 무영향(additive).
            if (PRESALE_LABEL_STYLE === 'crane' && isPresale) {
                attachCraneToLabel(contentDiv);
            }

            // [26_11] 분양 중 단지 혜성 꼬리 스파크 — PRESALE_LABEL_STYLE에 'spark' 포함 시(기본 'badge+spark').
            //   판정은 위에서 1회 계산한 isPresale 재사용. 마스크 띠 + pointer-events:none 자식이라
            //   클릭/줌이름갱신/배경 스파크라인에 무영향(additive).
            if (PRESALE_LABEL_STYLE.includes('spark') && isPresale) {
                attachSparkToLabel(contentDiv);
            }

            // [26_12] 신규 거래(new) 라벨 젤리 바운스 — isNew일 때만 부착(거래량 모드 렌더에서만 true).
            //   rAF 전역 시계(newtxJellyEpoch) 구동이라 재부착에도 모든 new 라벨이 동일 위상. 클릭/줌이름갱신/배경 스파크라인 무영향(additive).
            if (isNew) {
                attachNewtxJellyToLabel(contentDiv);
            }

            const openPanelHandler = () => {
                openDongAreaPanel({
                    aptNm: a.aptNm,
                    gu: a.gu || sggCdToGu(a.sggCd),
                    umdNm: a.umdNm || '',
                    buildYear: a.buildYear ?? null,
                    sggCd: a.sggCd ?? null
                });
            };

            kakao.maps.event.addListener(marker, 'click', openPanelHandler);
            contentDiv.addEventListener('click', (e) => {
                e.stopPropagation();
                // [30_6] 드래그·핀치였으면 패널을 열지 않는다(탭일 때만 연다). legacy면 항상 false라 기존 동작.
                if (labelGestureConsumed()) return;
                openPanelHandler();
            });
            contentDiv.addEventListener('mousedown', (e) => e.stopPropagation());
            // [30_6] 이름창 위 핀치/드래그 통과. legacy면 아래 기존 전면 차단 줄이 그대로 산다.
            if (LABEL_GESTURE === 'legacy') {
            contentDiv.addEventListener('touchstart', (e) => e.stopPropagation(), { passive: true });
            } else {
                bindLabelGesture(contentDiv);
            }

            const overlay = new kakao.maps.CustomOverlay({
                position: pos,
                content: contentDiv,
                xAnchor: 0.5, yAnchor: 1, zIndex: zIdx
            });
            // [24_3] 베이스 모드 한정 거래량 줌-노출: 현재 레벨에서 임계 미달이면 지도에서 빼둠
            //        (베이스 모드는 idle 재그리기로 줌마다 재평가 → 확대하면 다시 나타남)
            overlay.setMap(shouldShowAptLabel(a, currentLevel) ? map : null);
            drawn.push({ marker, overlay, apt: a });
        }
        // [26_7] 이번 렌더에서 분양권 크레인이 하나라도 부착됐으면 전역 시계 가동 (이미 돌고 있으면 무시).
        if (activeCranes.length > 0) startCraneClock();
        // [26_11] 분양 스파크도 동일 — 하나라도 부착됐으면 전역 시계 가동 (이미 돌고 있으면 무시).
        if (activeSparks.length > 0) startSparkClock();
        // [26_12] 신규거래 젤리도 동일 — 하나라도 부착됐으면 전역 시계 가동 (이미 돌고 있으면 무시).
        if (activeNewtxJellies.length > 0) startNewtxJellyClock();
    }

    /* ===== [index_26_8→26_11] 분양 중 표시 방식 손잡이 =====
       'badge' / 'spark' 는 문자열 포함(includes) 판정 — 'badge+spark'처럼 조합 가능.
       'badge'       = 라벨 우상단 '분양' 글자 배지(.bunyang-badge, new 배지와 동형)
       'spark'       = 라벨 테두리 혜성 꼬리 스파크(.bunyang-spark, 크레인 블록 아래 스파크 블록)
       'badge+spark' = 둘 다 표시 — 기본([26_11]부터)
       'crane'       = 라벨 위 타워크레인 SVG(아래 크레인 블록) — 정확일치 판정(기존 그대로), 코드 보존
       'off'         = 분양 중 표시 안 함
       (판정 자체는 presaleAptKeys 그대로 — 표시 방법만 분기) */
    const PRESALE_LABEL_STYLE = 'badge+spark';

    /* ===== [index_26_12] 거래량 라벨 색 채우기 손잡이 =====
       true  = 기존 동작(매매=흰→민트 농도, 분양권=흰→주황 농도 — getBgColorApt/getBgColorSilv)
       false = 거래량 모드에서도 라벨 배경 흰색 고정(기본) — 색 함수는 무수정 보존, drawMarkers 게이트만 분기 */
    const TX_LABEL_FILL = false;

    /* ===== [index_26_7] 분양권 라벨 크레인 — JS 전역 시계(rAF) 구동 =====
       CSS @keyframes 대신 단일 전역 시계(craneEpoch, 최초 1회 고정·절대 리셋 안 함)로 매 프레임 직접 구동.
       → Kakao CustomOverlay 재부착·매 idle 라벨 재생성에도 모든 크레인 위상이 구조적으로 일치(역세권 레이더 metroSweepEpoch와 동일 전략).
       시안 crane_realsize.html의 @keyframes hoist / a1~a4 를 키프레임 배열로 이식.
       ([26_8] 기본값 'badge'에선 attachCraneToLabel이 호출되지 않아 미가동 — 코드는 재사용 대비 전부 보존) */
    const CRANE_PERIOD_MS = 7000;   // 한 사이클(후크 4회 상하 + 층 1→4 적층) 길이. (시안 --spd 7s)  ← 속도 조정 손잡이
    // const craneReduceMotion = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
    const craneReduceMotion = false;

    // activeCranes: 화면에 떠 있는 크레인 핸들들 [{ hook, floors:[g,g,g,g] }]. clearDrawn에서 비우고 drawMarkers에서 다시 채움.
    let activeCranes = [];
    let craneEpoch = null;          // 최초 1회 고정 (metroSweepEpoch와 동일 컨셉)
    let craneRafId = null;

    // 크레인 SVG 템플릿: 1회만 파싱하고 이후 cloneNode로 복제 (라벨마다 innerHTML 재파싱 비용 회피).
    const craneNode = (function () {
      const holder = document.createElement('div');
      holder.innerHTML =
          '<svg class="crane" viewBox="0 30 180 108" aria-hidden="true">'
        +   '<g class="cr-hook"><line class="cr-cable" x1="100" y1="43" x2="100" y2="92"/><path d="M98.5 92 L100 94 L101.5 92"/></g>'
        +   '<g class="cr-floor"><rect class="cr-bldg" x="88" y="124" width="24" height="10"/><rect class="cr-wd" x="91" y="127" width="4" height="4.5"/><rect class="cr-wd" x="98" y="127" width="4" height="4.5"/><rect class="cr-wd" x="105" y="127" width="4" height="4.5"/></g>'
        +   '<g class="cr-floor"><rect class="cr-bldg" x="88" y="114" width="24" height="10"/><rect class="cr-wd" x="91" y="117" width="4" height="4.5"/><rect class="cr-wd" x="98" y="117" width="4" height="4.5"/><rect class="cr-wd" x="105" y="117" width="4" height="4.5"/></g>'
        +   '<g class="cr-floor"><rect class="cr-bldg" x="88" y="104" width="24" height="10"/><rect class="cr-wd" x="91" y="107" width="4" height="4.5"/><rect class="cr-wd" x="98" y="107" width="4" height="4.5"/><rect class="cr-wd" x="105" y="107" width="4" height="4.5"/></g>'
        +   '<g class="cr-floor"><rect class="cr-bldg" x="88" y="94" width="24" height="10"/><rect class="cr-wd" x="91" y="97" width="4" height="4.5"/><rect class="cr-wd" x="98" y="97" width="4" height="4.5"/><rect class="cr-wd" x="105" y="97" width="4" height="4.5"/></g>'
        +   '<path d="M40 134 V41 M33 134 H47 M40 41 H18 M40 41 H150"/>'
        +   '<rect class="cr-fill" x="12" y="38" width="6" height="7" rx="1"/>'
        +   '<rect class="cr-fill" x="96" y="39" width="8" height="4" rx="1"/>'
        + '</svg>';
      return holder.firstElementChild;
    })();

    // 시안 @keyframes hoist (후크 케이블 scaleY): [사이클%(0~100), scaleY]. 4회 상하 + 봉우리 점감.
    const CRANE_HOOK_KF = [
      [0,0.45],[4,0.45],[12,1.65],[20,0.45],[26,0.45],[34,1.45],[42,0.45],
      [48,0.45],[56,1.24],[64,0.45],[70,0.45],[78,1.04],[86,0.45],[100,0.45]
    ];
    // 시안 floor 등장 시작 %(fa1~fa4, 아래층부터). 등장 4% 동안 페이드+슬라이드 → 92%까지 유지 → 92~97% 동시 페이드아웃 후 리셋.
    const CRANE_FLOOR_START = [12, 34, 56, 78];

    const easeInOutCrane = function (t) { return t * t * (3 - 2 * t); };       // ease-in-out 근사 (후크)
    const easeOutCrane   = function (t) { return 1 - (1 - t) * (1 - t); };     // ease-out 근사 (층)

    function cranePhaseNow(now) {                                              // 0~1
      if (craneEpoch === null) craneEpoch = now;
      return ((now - craneEpoch) % CRANE_PERIOD_MS) / CRANE_PERIOD_MS;
    }
    function craneHookScale(pct) {                                            // pct: 0~100 → scaleY
      for (let i = 0; i < CRANE_HOOK_KF.length - 1; i++) {
        const a = CRANE_HOOK_KF[i], b = CRANE_HOOK_KF[i + 1];
        if (pct >= a[0] && pct <= b[0]) {
          const t = (b[0] === a[0]) ? 0 : (pct - a[0]) / (b[0] - a[0]);
          return a[1] + (b[1] - a[1]) * easeInOutCrane(t);
        }
      }
      return 0.45;
    }
    function craneFloorState(i, pct) {                                        // {o:opacity, ty:translateY(px)}
      const start = CRANE_FLOOR_START[i], appearEnd = start + 4;
      if (pct < start)     return { o: 0, ty: -4 };
      if (pct < appearEnd) { const e = easeOutCrane((pct - start) / 4); return { o: e, ty: -4 + 4 * e }; }
      if (pct < 92)        return { o: 1, ty: 0 };
      if (pct < 97)        { const e = easeOutCrane((pct - 92) / 5); return { o: 1 - e, ty: 0 }; }
      return { o: 0, ty: 0 };
    }

    // 이번 프레임 값(후크 scaleY + 4개 층 상태)을 한 번 계산 — 모든 크레인이 공유(동일 위상).
    function craneFrameValues(now) {
      if (craneReduceMotion) {
        return { hookS: 0.45, fs: [ {o:1,ty:0}, {o:1,ty:0}, {o:1,ty:0}, {o:1,ty:0} ] };
      }
      const pct = cranePhaseNow(now) * 100;
      return {
        hookS: craneHookScale(pct),
        fs: [ craneFloorState(0,pct), craneFloorState(1,pct), craneFloorState(2,pct), craneFloorState(3,pct) ]
      };
    }
    function applyCraneFrame(c, frame) {
      if (c.hook) c.hook.style.transform = 'scaleY(' + frame.hookS.toFixed(3) + ')';
      for (let i = 0; i < c.floors.length; i++) {
        const st = frame.fs[i] || frame.fs[frame.fs.length - 1];
        c.floors[i].style.opacity = st.o.toFixed(3);
        c.floors[i].style.transform = 'translateY(' + st.ty.toFixed(2) + 'px)';
      }
    }

    // 라벨(.aptLabel)에 크레인 1개 부착 + 후크/층 핸들 등록. 첫 프레임을 즉시 적용해 부착 순간 깜빡임 방지.
    function attachCraneToLabel(labelEl) {
      const crane = craneNode.cloneNode(true);
      labelEl.appendChild(crane);
      const c = {
        hook: crane.querySelector('.cr-hook'),
        floors: Array.prototype.slice.call(crane.querySelectorAll('.cr-floor'))
      };
      activeCranes.push(c);
      applyCraneFrame(c, craneFrameValues(performance.now()));
    }

    function craneTick(now) {
      if (activeCranes.length === 0) { craneRafId = null; return; }   // 표시 중 크레인 없으면 루프 정지
      const frame = craneFrameValues(now);
      for (const c of activeCranes) applyCraneFrame(c, frame);
      if (craneReduceMotion) { craneRafId = null; return; }           // 정적이면 1회만 적용하고 멈춤
      craneRafId = requestAnimationFrame(craneTick);
    }
    function startCraneClock() {
      if (craneRafId === null) craneRafId = requestAnimationFrame(craneTick);
    }

    /* ===== [index_26_11] 분양권 라벨 스파크(혜성 꼬리) — JS 전역 시계(rAF) 구동 =====
       시안 spark_label_demo.html ②(.s-comet)의 conic 회전을 이식. CSS @keyframes(--a 회전) 대신
       단일 전역 시계(sparkEpoch, 최초 1회 고정·절대 리셋 안 함)가 매 프레임 --spark-a를 직접 갱신
       → CustomOverlay 재부착·매 idle 라벨 재생성에도 모든 스파크 위상이 구조적으로 일치(크레인·역세권 레이더와 동일 전략).
       표시 게이트는 drawMarkers의 PRESALE_LABEL_STYLE 'spark' 포함 판정. 속도 손잡이 = SPARK_PERIOD_MS. */
    const SPARK_PERIOD_MS = 2400;   // 회전 1바퀴(ms). 시안 기본 --spd 2.4s  ← 속도 조정 손잡이
    // const sparkReduceMotion = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
    const sparkReduceMotion = false; // 크레인과 동일: OS 설정이 데스크탑 애니메이션을 조용히 끄는 문제로 비활성 고정

    // activeSparks: 화면에 떠 있는 스파크 링 요소들. clearDrawn에서 비우고 drawMarkers에서 다시 채움.
    let activeSparks = [];
    let sparkEpoch = null;          // 최초 1회 고정 (craneEpoch/metroSweepEpoch와 동일 컨셉)
    let sparkRafId = null;

    // 스파크 DOM 템플릿: 1회만 파싱하고 이후 cloneNode로 복제 (라벨마다 innerHTML 재파싱 비용 회피).
    //   래퍼 .bunyang-spark(잔광 drop-shadow) > 링 .bunyang-spark-ring(마스크 conic).
    const sparkNode = (function () {
      const holder = document.createElement('div');
      holder.innerHTML = '<span class="bunyang-spark" aria-hidden="true"><span class="bunyang-spark-ring"></span></span>';
      return holder.firstElementChild;
    })();

    function sparkAngleNow(now) {                  // 이번 프레임 회전각 0~360deg — 모든 스파크가 공유(동일 위상)
      if (sparkEpoch === null) sparkEpoch = now;
      return ((now - sparkEpoch) % SPARK_PERIOD_MS) / SPARK_PERIOD_MS * 360;
    }
    function applySparkFrame(ringEl, deg) {
      ringEl.style.setProperty('--spark-a', deg.toFixed(1) + 'deg');
    }

    // 라벨(.aptLabel) '첫 자식'으로 스파크 부착(insertBefore) — 배지(span)들보다 먼저 그려져 겹치는 픽셀은 배지가 위.
    // 첫 프레임 각도를 즉시 적용해 부착 순간 각도 튐 방지.
    function attachSparkToLabel(labelEl) {
      const spark = sparkNode.cloneNode(true);
      labelEl.insertBefore(spark, labelEl.firstChild);
      const ring = spark.firstElementChild;
      activeSparks.push(ring);
      applySparkFrame(ring, sparkReduceMotion ? 0 : sparkAngleNow(performance.now()));
    }

    function sparkTick(now) {
      if (activeSparks.length === 0) { sparkRafId = null; return; }  // 표시 중 스파크 없으면 루프 정지
      const deg = sparkAngleNow(now);
      for (const r of activeSparks) applySparkFrame(r, deg);
      if (sparkReduceMotion) { sparkRafId = null; return; }          // 정적이면 1회만 적용하고 멈춤
      sparkRafId = requestAnimationFrame(sparkTick);
    }
    function startSparkClock() {
      if (sparkRafId === null) sparkRafId = requestAnimationFrame(sparkTick);
    }

    /* ===== [index_27_10] 대장 순회 왕관 — JS 전역 시계(rAF) 구동 =====
       현재 대장 라벨 테두리(border-box)를 왕관 N개가 360/N 등간격으로 돈다.
       N = 현재 대장의 '연속 재위 연수'(1년→1, 2년→2, 3년+→3). 색 = 그 구/동 계보선 색.
       CSS @keyframes 대신 단일 전역 시계(daejangCrownEpoch, 최초 1회 고정·절대 리셋 안 함)로
       매 프레임 각 왕관의 offset-distance를 인라인으로 직접 갱신 →
       CustomOverlay 재부착(줌/드래그)·idle 라벨 재생성에도 모든 왕관 위상이 구조적으로 일치
       (크레인 craneEpoch·분양 스파크 sparkEpoch·젤리 newtxJellyEpoch와 동일 전략). */
    const DAEJANG_CROWN_PERIOD_MS = 5200;   // 왕관 1바퀴(느리게). 조정 손잡이
    const DAEJANG_TENURE_MAX_CROWNS = 3;    // 최대 왕관 수
    let daejangCrownEpoch = null;           // 최초 1회 고정
    let daejangCrownRafId = null;
    const activeDaejangCrowns = [];         // [{ runs:[svgEl...], n }] — 표시 중 현재 대장 라벨들
    const daejangCrownReduceMotion =
      window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    // 왕관 SVG 템플릿 — 1회 파싱 후 cloneNode로 복제 (데모 CROWN path 이식)
    const crownRunNode = (function () {
      const holder = document.createElement('div');
      holder.innerHTML =
        '<svg class="dj-cr dj-run" viewBox="0 0 44 32" aria-hidden="true">'
        + '<path class="cb" d="M1.8 8.4 L12.2 16 L22 3.4 L31.8 16 L42.2 8.4 L40.2 29.4'
        + ' Q40 30.6 38.8 30.6 L5.2 30.6 Q4 30.6 3.8 29.4 Z"/>'
        + '<path class="cs" d="M1.8 8.4 L12.2 16 L22 3.4 L16.5 30.6 L5.2 30.6 Q4 30.6 3.8 29.4 Z"/>'
        + '</svg>';
      return holder.firstElementChild;
    })();

    // 현재 대장의 '연속 재위 연수' → 왕관 수 (1년→1, 2년→2, 3년+→3)
    function daejangTenureYears(g) {
      const cur = djCurOf(g);                 // 현재 재위 레코드(rs 마지막) = 연속 구간
      return (cur.y1 - cur.y0 + 1);
    }
    function daejangCrownCount(g) {
      return Math.max(1, Math.min(DAEJANG_TENURE_MAX_CROWNS, daejangTenureYears(g)));
    }

    function daejangCrownAngleNow(now) {        // 0~1 진행률(모든 왕관 공유)
      if (daejangCrownEpoch === null) daejangCrownEpoch = now;
      return ((now - daejangCrownEpoch) % DAEJANG_CROWN_PERIOD_MS) / DAEJANG_CROWN_PERIOD_MS;
    }
    function applyCrownFrame(entry, base) {     // base: 0~1
      const n = entry.n;
      for (let k = 0; k < n; k++) {
        let d = (base + k / n) % 1;             // 등간격 위상
        entry.runs[k].style.offsetDistance = (d * 100).toFixed(2) + '%';
      }
    }

    // 라벨에 rim + 왕관 N개 부착 (텍스트·레이아웃 불변: 전부 absolute 자식)
    function attachCrownsToLabel(labelEl, color, n) {
      labelEl.style.setProperty('--dj-crown-c', color);
      const runs = [];
      for (let k = 0; k < n; k++) {
        const cr = crownRunNode.cloneNode(true);
        labelEl.appendChild(cr);
        runs.push(cr);
      }
      const entry = { runs, n };
      activeDaejangCrowns.push(entry);
      applyCrownFrame(entry, daejangCrownReduceMotion ? 0 : daejangCrownAngleNow(performance.now()));
    }

    function daejangCrownTick(now) {
      if (activeDaejangCrowns.length === 0) { daejangCrownRafId = null; return; }
      const base = daejangCrownAngleNow(now);
      for (const e of activeDaejangCrowns) applyCrownFrame(e, base);
      if (daejangCrownReduceMotion) { daejangCrownRafId = null; return; }
      daejangCrownRafId = requestAnimationFrame(daejangCrownTick);
    }
    function startDaejangCrownClock() {
      if (daejangCrownRafId === null) daejangCrownRafId = requestAnimationFrame(daejangCrownTick);
    }

    /* ===== [index_26_12] 신규거래(new) 라벨 젤리 바운스 — JS 전역 시계(rAF) 구동 =====
       CSS @keyframes 대신 단일 전역 시계(newtxJellyEpoch, 최초 1회 고정·절대 리셋 안 함)로 매 프레임 인라인 transform을 직접 구동.
       → CustomOverlay 재부착·매 idle 라벨 재생성에도 모든 new 라벨 위상이 구조적으로 일치(크레인·분양 스파크와 동일 전략).
       시안 spark_label_demo_3.html ⑤ @keyframes jelly(0/15/30/45/60/75~100%)를 키프레임 배열로 이식.
       구간별 ease-in-out은 기존 easeInOutCrane 재사용(신규 이징 함수 없음).
       조정 손잡이: 속도 NEWTX_JELLY_PERIOD_MS(2400ms=시안 --spd 2.4s), 점프 높이/눌림 정도는 NEWTX_JELLY_KF 값. */
    const NEWTX_JELLY_PERIOD_MS = 2400;
    // const newtxJellyReduceMotion = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
    const newtxJellyReduceMotion = false;

    // 시안 @keyframes jelly: [사이클%(0~100), translateY(px), scaleX, scaleY]. 75~100%는 휴지(정지) 구간.
    const NEWTX_JELLY_KF = [
      [0, 0, 1, 1],
      [15, -9, 0.96, 1.05],
      [30, 0, 1.07, 0.93],
      [45, -3, 0.98, 1.02],
      [60, 0, 1.02, 0.98],
      [75, 0, 1, 1],
      [100, 0, 1, 1]
    ];

    // activeNewtxJellies: 화면에 떠 있는 new 라벨 요소들. clearDrawn에서 비우고 drawMarkers에서 다시 채움.
    let activeNewtxJellies = [];
    let newtxJellyEpoch = null;     // 최초 1회 고정 (craneEpoch/sparkEpoch와 동일 컨셉)
    let newtxJellyRafId = null;

    function newtxJellyPhaseNow(now) {                 // 이번 프레임 사이클 위치 0~100(%) — 모든 new 라벨이 공유(동일 위상)
      if (newtxJellyEpoch === null) newtxJellyEpoch = now;
      return ((now - newtxJellyEpoch) % NEWTX_JELLY_PERIOD_MS) / NEWTX_JELLY_PERIOD_MS * 100;
    }
    function newtxJellyTransformAt(pct) {              // pct: 0~100 → 키프레임 구간별 ease-in-out 보간 transform 문자열
      for (let i = 0; i < NEWTX_JELLY_KF.length - 1; i++) {
        const a = NEWTX_JELLY_KF[i], b = NEWTX_JELLY_KF[i + 1];
        if (pct >= a[0] && pct <= b[0]) {
          const span = b[0] - a[0];
          const t = span > 0 ? easeInOutCrane((pct - a[0]) / span) : 0;
          const ty = a[1] + (b[1] - a[1]) * t;
          const sx = a[2] + (b[2] - a[2]) * t;
          const sy = a[3] + (b[3] - a[3]) * t;
          return 'translateY(' + ty.toFixed(2) + 'px) scale(' + sx.toFixed(3) + ', ' + sy.toFixed(3) + ')';
        }
      }
      return 'translateY(0px) scale(1, 1)';
    }
    function applyNewtxJellyFrame(el, pct) {
      el.style.transform = newtxJellyTransformAt(pct);
    }

    // 라벨(.aptLabel)에 젤리 클래스 부착 + 레지스트리 등록. 첫 프레임을 즉시 적용해 부착 순간 위상 튐 방지.
    function attachNewtxJellyToLabel(labelEl) {
      labelEl.classList.add('newtx-jelly');
      activeNewtxJellies.push(labelEl);
      applyNewtxJellyFrame(labelEl, newtxJellyReduceMotion ? 0 : newtxJellyPhaseNow(performance.now()));
    }

    function newtxJellyTick(now) {
      if (activeNewtxJellies.length === 0) { newtxJellyRafId = null; return; }  // 표시 중 new 라벨 없으면 루프 정지
      const pct = newtxJellyPhaseNow(now);
      for (const el of activeNewtxJellies) applyNewtxJellyFrame(el, pct);
      if (newtxJellyReduceMotion) { newtxJellyRafId = null; return; }           // 정적이면 1회만 적용하고 멈춤
      newtxJellyRafId = requestAnimationFrame(newtxJellyTick);
    }
    function startNewtxJellyClock() {
      if (newtxJellyRafId === null) newtxJellyRafId = requestAnimationFrame(newtxJellyTick);
    }

    const BRAND_DEFS = [
      { label: "자이", tokens: ["자이"] }, { label: "힐스테이트", tokens: ["힐스테이트"] },
      { label: "롯데캐슬", tokens: ["롯데캐슬"] }, { label: "래미안", tokens: ["래미안"] },
      { label: "아이파크", tokens: ["아이파크", "IPARK", "I'PARK"] }, { label: "위브", tokens: ["위브"] },
      { label: "푸르지오", tokens: ["푸르지오"] }, { label: "더샵", tokens: ["더샵"] },
      { label: "e편한세상", tokens: ["e편한세상", "이편한세상", "e편한"] }, { label: "SKVIEW", tokens: ["skview","sk뷰"] },
      { label: "그 외", tokens: [] }
    ].map(b => ({...b, tokens: b.tokens.map(normalizeName) }));

    // [v14_9] 브랜드별 고유 색상 (차트 팔레트 9색 + SKVIEW/그 외 추가 2색)
    // [v14_10] '그 외'는 키를 두지 않음 → 라벨은 흰색 디폴트, 버튼 selected는 mint 폴백
    const BRAND_COLORS = {
      "래미안":     "#00E5CC", // 청록
      "힐스테이트": "#FFB380", // 피치
      "푸르지오":   "#FF99CC", // 핑크
      "자이":       "#9966FF", // 라벤더
      "아이파크":   "#3399FF", // 페리윙클
      "위브":       "#339900", // 그린
      "롯데캐슬":   "#C0C0C0", // 실버
      "더샵":       "#FF3333", // 레드
      "e편한세상":  "#CC9966", // 탄
      "SKVIEW":     "#FF7A00"  // 오렌지(추가)
    };

    // [v14_9] 아파트 이름으로 브랜드 라벨 판정 (없으면 '그 외')
    function getAptBrand(aptNm) {
      const n = normalizeName(aptNm);
      for (const def of BRAND_DEFS) {
        if (def.label === "그 외") continue;
        for (const t of def.tokens) {
          if (t && n.includes(t)) return def.label;
        }
      }
      return "그 외";
    }

    // [v14_9] 배경 색상에 대비되는 글씨 색 자동 판정 (luminance 기반)
    function getContrastColor(hexColor) {
      if (!hexColor || typeof hexColor !== 'string' || hexColor[0] !== '#' || hexColor.length < 7) return '#222';
      const r = parseInt(hexColor.slice(1, 3), 16);
      const g = parseInt(hexColor.slice(3, 5), 16);
      const b = parseInt(hexColor.slice(5, 7), 16);
      const lum = 0.299 * r + 0.587 * g + 0.114 * b;
      return lum > 145 ? '#222' : '#fff';
    }

    let selectedBrands = new Set();
    let isTransactionMode = false; 

    // [index_20_2] 이름창 배경 '시세 추이' 스파크라인용 상태
    //   aptTrendMap: { "정규화이름|시군구코드" -> [ {ym, y(월평균가)}, ... ] }
    let aptTrendMap = {};
    let aptTrendLoaded = false;
    // [24_3] 단지별 최근 거래 건수(매매+분양권, 전 면적). loadAptTrendData에서 함께 집계 → 베이스 모드 라벨 줌-노출 순위용.
    let aptTradeCntMap = {};
    // [26_7] 분양권(분양 중) 단지 키 집합("정규화이름|시군구코드"). loadAptTrendData에서 최근 24개월 거래 출처로 판정.
    //   판정 규칙 = 상세 패널과 동일: 거래 1건 이상이면서 전부 분양권(silv), 매매 0건이면 분양 중으로 간주. 지도 라벨 크레인 표시용.
    let presaleAptKeys = new Set();

    // [index_20_5] 미니 트렌드 표시 토글 상태
    //   miniTrendOn: 현재 이름창 배경 미니 트렌드를 보여주는지 (토글로 수동 제어)
    //   miniTrendPrevFiltered: 직전 '필터 걸림' 여부 — 필터 ON↔OFF 경계를 넘을 때만 자동 전환
    let miniTrendOn = true;
    let miniTrendPrevFiltered = false;

    function matchesAnyBrand(aptNm, selectedLabels){
      const n = normalizeName(aptNm);
      const hasOther = selectedLabels.has("그 외");
      const selectedDefs = BRAND_DEFS.filter(b => selectedLabels.has(b.label) && b.label !== "그 외");
      let hitNormal = false;
      for(const def of selectedDefs){
          for(const t of def.tokens) if(t && n.includes(t)){ hitNormal = true; break; }
          if(hitNormal) break;
      }
      if(hitNormal) return true;
      if(hasOther){
          for(const def of BRAND_DEFS.filter(b=>b.label!=="그 외")){
              for(const t of def.tokens) if(t && n.includes(t)) return false;
          }
          return true;
      }
      return false;
    }

    function applyBrandFilter(){
      if(isTransactionMode) return;
      renderCombinedAptMarkersAndEffects(true);
    }

    /* ===== [통합 필터] 브랜드 ∩ 역세권 ∩ 초등 =====
       - 기존 개별 기능의 계산/시각화 자산은 유지한다.
       - 최종 아파트 라벨은 항상 이 함수에서 한 번만 그린다.
       - 역세권이 켜진 경우에는 기존 fast 방식처럼 현재 화면 + 20% 여유 영역만 렌더링한다.
    */
    function aptIdentityKey(apt) {
      return `${normalizeName(apt?.aptNm)}|${apt?.sggCd ?? ''}|${valueTrim(apt?.umdNm ?? '')}|${apt?.buildYear ?? ''}`;
    }

    function hasAnyCombinedFilter() {
      return selectedBrands.size > 0 || isStationMode || isSchoolMode || isBigMode || isNewMode;
    }

    function hasExtraFilterBeyondStation() {
      return selectedBrands.size > 0 || (isSchoolMode && schoolDist > 0);
    }

    /* [통합필터 v3 → index_20 갱신]
       버튼 색의 의미를 '패널 열림'과 '실제 필터 적용'으로 분리한다.
       - [index_20] 전체(all/0)도 거리 조건과 동일하게 '적용'으로 보아 패널을 닫아도 active 유지.
       - 미선택(metroRadius/schoolDist === null)일 때만 패널 열림 동안의 조작 중 표시로 active.
       '전체'(all)도 거리 선택과 동일하게 '적용된 필터'로 인정한다.
       오직 아무것도 선택 안 한 상태(metroRadius === null)만 미적용으로 본다.
       → 전체/거리가 선택되어 있으면 패널을 닫거나 다른 버튼을 눌러도 불·기능이 유지된다.
    */
    /* [index_20_1] 미선택(null)=전체 취급으로 바뀌었으므로, 기능이 켜져 있으면(ON)
       항상 '적용된' 것으로 본다. → 다른 메인 버튼으로 전환해도 켜진 기능은 유지된다. */
    function isStationFilterApplied() {
      return isStationMode;
    }

    function isSchoolFilterApplied() {
      return isSchoolMode;
    }

    function closePreviewPanelWithoutAppliedFilter(panel) {
      let changed = false;

      if (panel === 'station' && isStationMode && !isStationFilterApplied()) {
        clearMetroOverlays();
        isStationMode = false;
        metroCurrentCandidateApts = [];
        metroCurrentCandidateAptKeySet = new Set();
        metroCurrentCandidatePolygons = [];
        metroCurrentIsAll = true;
        metroCurrentEffectiveRadius = null;
        stationDisclaimer.style.display = 'none';
        changed = true;
      }

      if (panel === 'school' && isSchoolMode && !isSchoolFilterApplied()) {
        hideSchoolMode();
        changed = true;
      }

      if (activePanel === panel) activePanel = null;
      return changed;
    }

    function passBrandFilter(apt) {
      if (selectedBrands.size === 0) return true;
      return matchesAnyBrand(apt.aptNm, selectedBrands);
    }

    function passStationFilter(apt) {
      if (!isStationMode) return true;
      if (metroRadius === null) return true; // [index_20_1] 미선택 → 제약 없음(전체 통과)
      if (metroCurrentIsAll) return true;
      return metroCurrentCandidateAptKeySet.has(aptIdentityKey(apt));
    }

    function passSchoolFilter(apt) {
      if (!isSchoolMode) return true;
      if (schoolDist === null) return true; // [index_20_1] 미선택 → 제약 없음(전체 통과)
      if (schoolDist === 0) return true;
      const zone = apt?._schoolZone || null;
      if (!zone) return false;
      return schoolDistanceMeters(apt.lat, apt.lng, zone.lat, zone.lng) <= schoolDist;
    }

    /* ===== [26_10] 대단지/신축 필터 =====
       데이터 출처는 둘 다 MySQL(apt_master 울산 / apt_master_busan 부산).
       apt_coor.json엔 세대수/준공년도가 없으므로 시작 시 일괄 엔드포인트로 1회 로드해
       aptMetaMap(키 'normalizeName(이름)|sggCd' → {sds, buildYear})을 만들어 두고 필터에서 룩업한다.
       지도 시각효과는 없고 교집합 후보만 좁힌다(브랜드와 동일하게 미선택/전체면 통과). */
    const APT_MASTER_ALL_API_URL = "../api/apt_master_all.php"; // [26_10] apt_master + apt_master_busan 일괄 메타
    let aptMetaMap = new Map();        // [26_10] 'normalizeName(이름)|sggCd' → { sds, buildYear }
    let isBigMode = false;             // [26_10] 대단지 기능 ON 여부
    let isNewMode = false;             // [26_10] 신축 기능 ON 여부
    let bigSds = null;                 // [26_10] null=미선택(전체 통과) / 0=전체 / 숫자=세대수 임계값
    let newAge = null;                 // [26_10] null=미선택(전체 통과) / 0=전체 / 숫자=최대 준공경과년수
    const NEW_FILTER_BASE_YEAR = new Date().getFullYear(); // [26_10] 신축 경과년수 기준연도(페이지 로드 시점)

    async function loadAptMasterMeta(){
      try {
        const res = await fetch(APT_MASTER_ALL_API_URL, { cache: 'no-store' });
        if (!res.ok) return;
        const data = await res.json();
        const items = Array.isArray(data) ? data : (Array.isArray(data?.items) ? data.items : []);
        const m = new Map();
        for (const it of items) {
          const nm = pick(it, ["apt_nm","aptNm"]);
          const cd = pick(it, ["sgg_cd","sggCd"]);
          if (nm == null || cd == null || String(cd).trim() === '') continue;
          const sdsRaw = pick(it, ["sds"]);
          const byRaw  = pick(it, ["build_year","buildYear"]);
          const sds = (sdsRaw == null || String(sdsRaw).trim() === '') ? null : Number(sdsRaw);
          const by  = (byRaw  == null || String(byRaw).trim()  === '') ? null : Number(byRaw);
          m.set(normalizeName(nm) + '|' + Number(cd), {
            sds: Number.isFinite(sds) ? sds : null,
            buildYear: Number.isFinite(by) ? by : null
          });
        }
        aptMetaMap = m;
        toast(`단지 메타 로드: ${aptMetaMap.size}개`, 1000);
      } catch (e) { /* 실패해도 무시 — 대단지/신축은 미상 처리 */ }
    }

    function getAptMasterMeta(apt){
      if (!apt) return null;
      return aptMetaMap.get(normalizeName(apt.aptNm) + '|' + Number(apt.sggCd)) || null;
    }

    function passBigFilter(apt){
      if (!isBigMode) return true;
      if (bigSds === null || bigSds === 0) return true; // 미선택/전체 → 통과
      const meta = getAptMasterMeta(apt);
      if (!meta || meta.sds == null) return false;       // 세대수 미상 → 임계값 조건 불충족
      return meta.sds >= bigSds;
    }

    function passNewFilter(apt){
      if (!isNewMode) return true;
      if (newAge === null || newAge === 0) return true;  // 미선택/전체 → 통과
      const meta = getAptMasterMeta(apt);
      if (!meta || meta.buildYear == null) return false; // 준공년도 미상 → 조건 불충족
      return (NEW_FILTER_BASE_YEAR - meta.buildYear) <= newAge;
    }

    function getCombinedAptCandidates() {
      return APTS.filter(apt =>
        passBrandFilter(apt) &&
        passStationFilter(apt) &&
        passSchoolFilter(apt) &&
        passBigFilter(apt) &&
        passNewFilter(apt)
      );
    }

    function getCombinedVisibleApts(candidates) {
      if (!isStationMode) return candidates;
      const viewBox = metroGetViewportBox();
      return candidates.filter(a =>
        metroPointInViewport(Number(a.lat), Number(a.lng), viewBox)
      );
    }

    function getMetroPolygonCandidatesForCombined(candidates) {
      if (!isStationMode) return [];
      if (metroCurrentIsAll && !hasExtraFilterBeyondStation()) {
        return metroCurrentCandidatePolygons;
      }
      const renderedKeys = new Set();
      const polygons = [];
      candidates.forEach(apt => {
        const found = findPolygonForApt(metroCurrentPolygonData, apt);
        if (!found || !Array.isArray(found.outline)) return;
        const key = metroPolygonKey(found);
        if (renderedKeys.has(key)) return;
        renderedKeys.add(key);
        polygons.push(found);
      });
      return polygons;
    }

    function renderStationEffectsForCombined(candidates) {
      if (!isStationMode) {
        clearMetroPolygons();
        return;
      }
      // [index_20_1] 미선택(null)은 '전체'와 동일하게 취급 — 시각요소를 그대로 표시한다.
      const treatAsAll = (metroRadius === null) || metroCurrentIsAll;

      drawn.forEach(d => {
        try {
          const el = d.overlay?.getContent();
          if (!el || !el.classList) return;
          const found = findPolygonForApt(metroCurrentPolygonData, d.apt);
          if (found) {
            el.classList.add('station-nearby');
            // [v12] 펄스 루프가 폴리곤 키로 이 라벨을 확실히 찾도록 동일 키를 새겨둔다.
            el.dataset.metroKey = metroPolygonKey(found);
          } else {
            el.classList.remove('station-nearby');
            // [v11] 폴리곤 비보유 라벨은 점멸 대상이 아니므로 JS가 남긴 inline 글로우를 제거.
            if (el.style && el.style.boxShadow) el.style.boxShadow = '';
            if (el.style && el.style.outline) { el.style.outline = ''; el.style.outlineOffset = ''; } // [v13]
            if (el.style && el.style.transition) el.style.transition = ''; // [v14] 원래 CSS transition 복원
            if (el.dataset) delete el.dataset.metroKey;
          }
        } catch(e) {}
      });

      clearMetroPolygons();
      const viewBox = metroGetViewportBox();
      const visiblePolygons = getMetroPolygonCandidatesForCombined(candidates).filter(found =>
        metroBboxIntersects(metroPolygonEntryBounds(found), viewBox)
      );
      visiblePolygons.forEach(found => renderMetroPolygonEntry(found));
      // [v9] 폴리곤이 0개여도 레이더 빛 회전을 위해 루프를 돌린다(요소 읽기가 아니라 JS가 빛을 구동).
      //  - 단 '전체'(또는 미선택=전체 취급) 모드는 레이더가 없으므로 시작하지 않는다.
      if (!treatAsAll) startPolygonPulse();
    }

    function getDrawnSchoolZoneIdSet() {
      const zoneIds = new Set();
      drawn.forEach(d => {
        const zone = d?.apt?._schoolZone || null;
        if (zone?.id) zoneIds.add(zone.id);
      });
      return zoneIds;
    }

    function updateSchoolZoneOverlays(activeZoneIds = null) {
      if (!isSchoolMode || !schoolDataReady) return;
      const dist = schoolDist;
      const shouldLimitByActiveZones = activeZoneIds instanceof Set;

      schoolZones.forEach(zone => {
        const isActiveZone = !shouldLimitByActiveZones || activeZoneIds.has(zone.id);

        // [통합 필터 보정]
        // 최종 교집합으로 그려진 아파트가 하나도 없는 학교/학구는
        // 학교 라벨과 거리 원까지 모두 숨긴다.
        if (!isActiveZone) {
          if (zone.markerOverlay) zone.markerOverlay.setMap(null);
          if (zone.circle) zone.circle.setMap(null);
          return;
        }

        if (!zone.markerOverlay) {
          const label = document.createElement('div');
          label.className = 'schoolLabel' + (zone.isShared ? ' shared' : '');
          label.textContent = zone.displayName;
          if (zone.isShared) {
            label.style.background = '#fff';
            label.style.border = '1.5px dashed ' + zone.color;
          } else {
            label.style.background = zone.color;
            label.style.border = '1px solid rgba(0,0,0,0.1)';
          }
          zone.markerOverlay = new kakao.maps.CustomOverlay({
            position: new kakao.maps.LatLng(zone.lat, zone.lng),
            content: label,
            yAnchor: 0,
            xAnchor: 0.5,
            zIndex: 7
          });
        }
        zone.markerOverlay.setMap(map);

        if (dist > 0) {
          if (!zone.circle) {
            zone.circle = new kakao.maps.Circle({
              center: new kakao.maps.LatLng(zone.lat, zone.lng),
              radius: dist,
              strokeWeight: 1.5,
              strokeColor: zone.color,
              strokeOpacity: 0.85,
              strokeStyle: 'solid',
              fillColor: zone.color,
              fillOpacity: 0.12
            });
          } else {
            zone.circle.setRadius(dist);
            zone.circle.setOptions({ strokeColor: zone.color, fillColor: zone.color });
          }
          zone.circle.setMap(map);
        } else if (zone.circle) {
          zone.circle.setMap(null);
        }
      });
    }

    function renderSchoolEffectsForDrawn() {
      if (!isSchoolMode) {
        schoolCurrentConnections = [];
        clearSchoolPaths();
        return;
      }

      const connections = [];
      const activeZoneIds = new Set();

      drawn.forEach(d => {
        const apt = d.apt;
        const zone = apt?._schoolZone || null;
        const el = d.overlay?.getContent();

        if (!zone) {
          if (el && el.classList) {
            el.classList.remove('school-nearby');
            el.style.removeProperty('--school-pulse-rgb');
            el.style.animationDelay = '';
          }
          return;
        }

        if (zone.id) activeZoneIds.add(zone.id);

        if (el && el.classList) {
          el.style.backgroundColor = '';
          el.style.setProperty('--school-pulse-rgb', schoolHexToRgbCsv(zone.color));
          el.style.animationDelay = schoolSyncDelay(SCHOOL_PULSE_DURATION);
          el.classList.add('school-nearby');
        }
        connections.push({
          aptLat: apt.lat,
          aptLng: apt.lng,
          schLat: zone.lat,
          schLng: zone.lng,
          color: schoolLineColorForZone(zone),
          colorIdx: zone.colorIdx
        });
      });

      updateSchoolZoneOverlays(activeZoneIds);
      updateSchoolViewportPolygons(activeZoneIds);

      scheduleSchoolLabelPulseSync(0);
      schoolCurrentConnections = connections;
      renderSchoolPaths(connections);
    }

    function syncFeatureButtonStates() {
      document.querySelectorAll('#sideFilters .filterBtn').forEach(btn => {
        if (isTransactionMode) {
          btn.classList.remove('active');
          return;
        }
        const p = btn.dataset.panel;
        let on = false;
        // [index_20_1] 메인 버튼 불은 '기능 ON' 또는 '패널 열림' 기준.
        //   (미선택이어도 기능이 켜져 있으면 불 유지 — 요청 6번)
        if (p === 'brand') on = selectedBrands.size > 0 || activePanel === 'brand';
        else if (p === 'station') on = isStationMode || activePanel === 'station';
        else if (p === 'school') on = isSchoolMode || activePanel === 'school';
        else if (p === 'big') on = isBigMode || activePanel === 'big';
        else if (p === 'new') on = isNewMode || activePanel === 'new';
        btn.classList.toggle('active', on);
      });
    }

    function updateFilterPanelVisibility() {
      brandList.style.display = (activePanel === 'brand') ? 'flex' : 'none';
      stationList.style.display = (activePanel === 'station') ? 'flex' : 'none';
      document.getElementById('schoolDistList').style.display = (activePanel === 'school') ? 'flex' : 'none';
      document.getElementById('bigList').style.display = (activePanel === 'big') ? 'flex' : 'none';
      document.getElementById('newList').style.display = (activePanel === 'new') ? 'flex' : 'none';
      syncFeatureButtonStates();
    }

    /* [index_20_1] 베이스(무필터) 상태에서 APTS 전체를 화면 근처만 그린다.
       - 역세권 성능 패턴과 동일하게 viewport+20% 여유 영역으로 제한해 과부하 방지.
       - 화면 이동/줌 시 idle 리스너가 다시 호출해 자연스럽게 갱신된다. */
    function drawBaseViewportApts() {
      if (isTransactionMode) return;
      if (isDaejangMode) return;   // [27_1] 대장 모드: idle 재그리기로 라벨이 되살아나지 않도록
      const viewBox = metroGetViewportBox();
      const visibleApts = APTS.filter(a =>
        metroPointInViewport(Number(a.lat), Number(a.lng), viewBox)
      );
      if (visibleApts.length > 0) drawMarkers(visibleApts);
      else clearDrawn();
    }

    function renderCombinedAptMarkersAndEffects(showToast = false) {
      if (isTransactionMode) return;
      if (isDaejangMode) return;   // [27_1] 대장 모드에선 아파트 라벨을 그리지 않음(왕관/계보선만)
      syncMiniTrendWithFilter(); // [index_20_5] 필터 상태에 따라 미니 트렌드 자동 보기/끄기 + 토글 라벨 갱신

      if (!hasAnyCombinedFilter()) {
        // [index_20_1] 필터·기능이 하나도 없는 베이스 상태에서도 지도를 비우지 않고
        //   APTS 전체를 현재 화면(+여유) 기준으로 표시한다 (초기 전체 표시).
        drawBaseViewportApts();
        if (!isStationMode) clearMetroPolygons();
        if (!isSchoolMode) {
          schoolCurrentConnections = [];
          clearSchoolPaths();
        }
        syncFeatureButtonStates();
        return;
      }

      const candidates = getCombinedAptCandidates();
      const visibleApts = getCombinedVisibleApts(candidates);

      if (visibleApts.length > 0) drawMarkers(visibleApts);
      else clearDrawn();

      if (isStationMode) renderStationEffectsForCombined(candidates);
      else clearMetroPolygons();

      if (isSchoolMode) renderSchoolEffectsForDrawn();
      else {
        schoolCurrentConnections = [];
        clearSchoolPaths();
      }

      syncFeatureButtonStates();
      if (showToast) {
        const screenText = isStationMode ? ` · 화면 ${visibleApts.length}개` : '';
        toast(`교집합 후보 ${candidates.length}개${screenText} 표시됨`, 1200);
      }
    }

    const START_YEAR = 2011;
    const START_MONTH = 1;
    const _now = new Date();
    const END_YEAR = _now.getFullYear();
    const END_MONTH = _now.getMonth() + 1;

    const TOTAL_MONTHS = (END_YEAR - START_YEAR) * 12 + (END_MONTH - START_MONTH) + 1;
    const TOTAL_STEPS = TOTAL_MONTHS - 1;
    let currentMin = TOTAL_STEPS, currentMax = TOTAL_STEPS;
    const fileCache = {};

    /* ===== [index_20_2] 이름창 배경 시세 추이 (A안: 최근 12개월 · 84타입) ===== */
    const TREND_MONTHS = 24;     // 최근 24개월
    const TREND_AREA_MIN = 80;   // 전용면적 80㎡ 초과
    const TREND_AREA_MAX = 90;   // 전용면적 90㎡ 미만  → (80, 90) 구간을 '84타입'으로 간주

    // 첫 접속 시 1회 호출: 최근 12개월 매매(data_*) + 분양권(silv_*) 파일을 받아
    // 단지별 84타입 '월평균가' 시계열을 aptTrendMap에 미리 집계한다.
    // 기존 fileCache를 그대로 공유하므로 패널을 열 때(fetchAllTradesForApt)와 중복 fetch가 없다.
    async function loadAptTrendData() {
      try {
        // 최근 TREND_MONTHS개월 파일 목록 (END 기준으로 거꾸로)
        const specs = [];
        let y = END_YEAR, m = END_MONTH;
        for (let i = 0; i < TREND_MONTHS; i++) {
          const mm = String(m).padStart(2, '0');
          specs.push({ file: `../data/apt/data_${y}_${mm}.json`,  source: 'apt'  });
          specs.push({ file: `../data/silv/silv_${y}_${mm}.json`, source: 'silv' });
          // [index_24] 부산 단지 라벨 배경 스파크라인용 — 집계/조회 키가 'aptNm|sggCd'라 울산과 안 섞임
          specs.push({ file: `../data/busan/apt/data_${y}_${mm}.json`,  source: 'apt'  });
          specs.push({ file: `../data/busan/silv/silv_${y}_${mm}.json`, source: 'silv' });
          m--; if (m < 1) { m = 12; y--; }
        }

        const results = await Promise.all(specs.map(async ({ file, source }) => {
          if (fileCache[file]) return fileCache[file];
          try {
            const res = await fetch(file);
            if (!res.ok) return [];
            const json = await res.json();
            const tagged = json.map(item => ({ ...item, _source: source })); // fetchAllTradesForApt와 동일 형태
            fileCache[file] = tagged;
            return tagged;
          } catch (e) { return []; }
        }));

        // 단지 × 월 → 합계/건수
        const byApt = {}; // key -> { ym -> {sum, cnt} }
        // [30_5] 단지 × 전용면적 × 월 → 합계/건수. 84타입 필터를 타지 않는 전 면적 집계다.
        //   같은 results 를 재사용하므로 추가 fetch 0. 84타입 로직(byApt)은 손대지 않았다.
        const byAptArea = {};
        const cntByApt = {}; // [24_3] key -> 최근 거래 건수(전 면적). 라벨 줌-노출 순위용
        const silvCntByApt = {}; // [26_7] key -> 분양권(silv) 거래 건수 (분양 중 판정용)
        const aptCntByApt = {};  // [26_7] key -> 매매(apt) 거래 건수 (분양 중 판정용)
        for (const it of results.flat()) {
          if (!isNormalDeal(it)) continue;                 // 취소·해제 거래 제외 (기존 규칙 재사용)
          // [24_3] 84타입 필터 전에 '전 면적' 최근 거래 건수 집계 (라벨 줌-노출 순위용)
          {
            const cKey = normalizeName(it.aptNm) + '|' + (it.sggCd == null ? '' : String(Number(it.sggCd)));
            cntByApt[cKey] = (cntByApt[cKey] || 0) + 1;
            // [26_7] 분양 중 판정용 출처 집계 — 상세 패널 규칙(전부 silv면 분양권)을 지도 라벨에 적용
            if (it._source === 'silv') silvCntByApt[cKey] = (silvCntByApt[cKey] || 0) + 1;
            else                       aptCntByApt[cKey]  = (aptCntByApt[cKey]  || 0) + 1;
          }
          const area = parseFloat(it.excluUseAr);
          // [30_5] 전용면적별 집계 — 84타입 필터(다음 줄) '앞'에서 전 면적을 담는다
          {
            const amtA = parseInt(String(it.dealAmount).replace(/,/g, ''), 10);
            const yrA = Number(it.dealYear), moA = Number(it.dealMonth);
            if (Number.isFinite(area) && Number.isFinite(amtA) && Number.isFinite(yrA) && Number.isFinite(moA)) {
              const aKey = normalizeName(it.aptNm) + '|' + (it.sggCd == null ? '' : String(Number(it.sggCd))) + '|' + area.toFixed(2);
              const ymA = yrA * 100 + moA;
              if (!byAptArea[aKey]) byAptArea[aKey] = {};
              if (!byAptArea[aKey][ymA]) byAptArea[aKey][ymA] = { sum: 0, cnt: 0 };
              byAptArea[aKey][ymA].sum += amtA;
              byAptArea[aKey][ymA].cnt++;
            }
          }
          if (!(area > TREND_AREA_MIN && area < TREND_AREA_MAX)) continue; // 84타입만
          const amt = parseInt(String(it.dealAmount).replace(/,/g, ''), 10); // 만원
          if (!Number.isFinite(amt)) continue;
          const yr = Number(it.dealYear), mo = Number(it.dealMonth);
          if (!Number.isFinite(yr) || !Number.isFinite(mo)) continue;
          const key = normalizeName(it.aptNm) + '|' + (it.sggCd == null ? '' : String(Number(it.sggCd)));
          const ym = yr * 100 + mo;
          if (!byApt[key]) byApt[key] = {};
          if (!byApt[key][ym]) byApt[key][ym] = { sum: 0, cnt: 0 };
          byApt[key][ym].sum += amt;
          byApt[key][ym].cnt++;
        }

        // 월평균 시계열로 변환 (점 2개 미만이면 추세선을 못 그리므로 제외)
        const map = {};
        for (const key in byApt) {
          const months = Object.keys(byApt[key]).map(Number).sort((a, b) => a - b);
          if (months.length < 2) continue;
          map[key] = months.map(ym => {
            const { sum, cnt } = byApt[key][ym];
            return { ym, y: sum / cnt };
          });
        }
        aptTrendMap = map;
        // [30_5] 전용면적별 월평균 시계열 확정. 점 2개 미만은 선을 못 그리므로 제외.
        {
          const amap = {};
          for (const k in byAptArea) {
            const ms = Object.keys(byAptArea[k]).map(Number).sort((a, b) => a - b);
            if (ms.length < TX_AREA_MIN_PTS) continue;
            amap[k] = ms.map(ym => {
              const { sum, cnt } = byAptArea[k][ym];
              return { ym, y: sum / cnt };
            });
          }
          aptAreaTrendMap = amap;
        }
        aptTradeCntMap = cntByApt; // [24_3] 거래 건수 맵 확정 (성공 시에만 채워짐)
        // [26_7] 분양 중 단지 키 집합 확정: 최근 24개월 거래가 1건 이상이고 전부 분양권(silv)·매매 0건이면 분양 중
        //   (실패 시 catch로 빠져 presaleAptKeys는 빈 집합 유지 → 크레인 미표시, 기존 동작 보존)
        {
          const presale = new Set();
          for (const k in silvCntByApt) {
            if (silvCntByApt[k] > 0 && !(aptCntByApt[k] > 0)) presale.add(k);
          }
          presaleAptKeys = presale;
        }
        aptTrendLoaded = true;
      } catch (e) {
        // 실패해도 배경 추세선만 안 뜰 뿐, 기존 라벨/지도 동작에는 영향 없음
        aptTrendLoaded = false;
      }
    }

    // [index_20_4] 단조(monotone) 3차 보간으로 점들을 부드러운 곡선 path로 잇는다.
    //   상세 패널 차트의 cubicInterpolationMode:'monotone'과 동일한 방식(Fritsch–Carlson) →
    //   데이터 점을 넘어서는 오버슈트(수직 낙하선) 없이 매끄럽게.  pts: [[x,y], ...] (x 오름차순)
    function buildMonotonePath(pts) {
      const n = pts.length;
      if (n < 2) return '';
      const xs = pts.map(p => p[0]), ys = pts.map(p => p[1]);

      // 구간별 기울기(secant)
      const d = [];
      for (let i = 0; i < n - 1; i++) {
        const dx = xs[i + 1] - xs[i];
        d[i] = dx === 0 ? 0 : (ys[i + 1] - ys[i]) / dx;
      }
      // 각 점의 접선(tangent)
      const m = new Array(n);
      m[0] = d[0];
      m[n - 1] = d[n - 2];
      for (let i = 1; i < n - 1; i++) {
        m[i] = (d[i - 1] * d[i] <= 0) ? 0 : (d[i - 1] + d[i]) / 2; // 극값에선 평탄 → 봉우리/골 넘침 방지
      }
      // 단조성 보정
      for (let i = 0; i < n - 1; i++) {
        if (d[i] === 0) { m[i] = 0; m[i + 1] = 0; continue; }
        const a = m[i] / d[i], b = m[i + 1] / d[i];
        const s = a * a + b * b;
        if (s > 9) {
          const t = 3 / Math.sqrt(s);
          m[i] = t * a * d[i];
          m[i + 1] = t * b * d[i];
        }
      }
      // 접선 → 3차 베지어 제어점
      let path = `M ${xs[0].toFixed(1)},${ys[0].toFixed(1)}`;
      for (let i = 0; i < n - 1; i++) {
        const dx = xs[i + 1] - xs[i];
        const c1x = xs[i] + dx / 3,     c1y = ys[i] + m[i] * dx / 3;
        const c2x = xs[i + 1] - dx / 3, c2y = ys[i + 1] - m[i + 1] * dx / 3;
        path += ` C ${c1x.toFixed(1)},${c1y.toFixed(1)} ${c2x.toFixed(1)},${c2y.toFixed(1)} ${xs[i + 1].toFixed(1)},${ys[i + 1].toFixed(1)}`;
      }
      return path;
    }

    // 월평균 시계열 → 라벨 배경에 깔 흐릿한 미니 스파크라인(data URI SVG) 생성.
    // 이름 가독성을 위해 옅은 민트 라인 + 더 옅은 면적 음영만 사용.
    function buildTrendSparklineDataUri(points) {
      if (!points || points.length < 2) return null;
      const W = 100, H = 36, padY = 5;

      // x: 월 간격 반영 (거래 없는 달은 가로로 벌어짐)
      const ks = points.map(p => Math.floor(p.ym / 100) * 12 + ((p.ym % 100) - 1));
      const minK = ks[0], maxK = ks[ks.length - 1];
      const spanK = (maxK - minK) || 1;

      const ys = points.map(p => p.y);
      const minY = Math.min(...ys), maxY = Math.max(...ys);
      const flat = (maxY === minY);
      const spanY = (maxY - minY) || 1;

      const coords = points.map((p, i) => {
        const x = ((ks[i] - minK) / spanK) * W;
        const yv = flat ? (H / 2) : (padY + (H - 2 * padY) * (1 - (p.y - minY) / spanY)); // SVG는 y가 아래로 증가 → 반전
        return [x, yv];
      });

      // [index_20_4] 직선 polyline → 단조 3차 곡선(path)으로 교체 (상세 패널 차트와 동일한 굴곡)
      const linePath = buildMonotonePath(coords);
      const x0 = coords[0][0].toFixed(1), xN = coords[coords.length - 1][0].toFixed(1);
      const areaPath = linePath + ` L ${xN},${H} L ${x0},${H} Z`;

      // 방향 색: 창 안 첫 달 평균 vs 마지막 달 평균
      //   상승=빨강 / 하락=파랑 / 동일=회색(중립). (역세권 파랑 #007bff와 구분되는 톤)
      const first = points[0].y, last = points[points.length - 1].y;
      const color = last > first ? '#e5484d'   // 상승
                  : last < first ? '#2563eb'   // 하락
                  : '#9ca3af';                 // 중립 (변동 없음)

      const svg =
        `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${W} ${H}' preserveAspectRatio='none'>`
        + `<path d='${areaPath}' fill='${color}' fill-opacity='0.08'/>`
        + `<path d='${linePath}' fill='none' stroke='${color}' stroke-opacity='0.8' stroke-width='0.8' stroke-linejoin='round' stroke-linecap='round'/>`
        + `</svg>`;

      return 'data:image/svg+xml,' + encodeURIComponent(svg);
    }

    /* ===== [index_20_5] 미니 트렌드 표시 토글 ===== */
    // 라벨 하나에 미니 트렌드 배경을 적용/해제 (miniTrendOn 기준)
    function applyTrendBgToLabel(el, apt) {
      if (!el || !apt) return;
      if (miniTrendOn) {
        const key = normalizeName(apt.aptNm) + '|' + (apt.sggCd == null ? '' : String(Number(apt.sggCd)));
        const uri = buildTrendSparklineDataUri(aptTrendMap[key]);
        if (uri) {
          el.classList.add('has-trend');
          el.style.backgroundImage = `url("${uri}")`;
          return;
        }
      }
      el.classList.remove('has-trend');
      el.style.removeProperty('background-image');
    }

    // 이미 그려진 라벨들(drawn)에 토글 상태를 즉시 반영 (재fetch·재계산 없이 배경만 갱신)
    //   ※ querySelectorAll은 화면 밖 오버레이를 놓치므로 drawn 배열을 직접 순회
    function applyMiniTrendToDrawn() {
      for (const d of drawn) {
        try {
          const el = d.overlay && d.overlay.getContent ? d.overlay.getContent() : null;
          applyTrendBgToLabel(el, d.apt);
        } catch (e) {}
      }
    }

    // '필터 걸림' = 메인 버튼(브/역/대/신/평/초) 또는 거래량 모드 중 하나라도 활성
    function isMiniTrendFilterActive() {
      return isTransactionMode || hasAnyCombinedFilter();
    }

    // 필터 ON↔OFF 경계를 넘을 때만 기본값으로 자동 전환 (그 안에서는 사용자 수동 선택을 유지)
    //   - 필터 없음 → 자동 '보기'(ON) / 필터 걸림 → 자동 '끄기'(OFF)
    function syncMiniTrendWithFilter() {
      const filtered = isMiniTrendFilterActive();
      if (filtered !== miniTrendPrevFiltered) {
        miniTrendOn = !filtered;
        miniTrendPrevFiltered = filtered;
      }
      updateMiniTrendToggleUI();
    }

    // 토글 버튼 상태 표시: 'on' 클래스가 스위치 켜짐/꺼짐을 나타냄 ('미니 차트' 텍스트는 고정)
    function updateMiniTrendToggleUI() {
      const btn = document.getElementById('miniTrendToggle');
      if (!btn) return;
      btn.classList.toggle('on', miniTrendOn);
    }

    // 토글 클릭: 수동으로 보기↔끄기 전환 후, 그려진 라벨에 즉시 반영
    function bindMiniTrendToggle() {
      const btn = document.getElementById('miniTrendToggle');
      if (!btn) return;
      btn.addEventListener('click', () => {
        miniTrendOn = !miniTrendOn;
        updateMiniTrendToggleUI();
        applyMiniTrendToDrawn();
      });
      updateMiniTrendToggleUI();
    }
    bindMiniTrendToggle();

    const sliderContainer = document.getElementById('slider-container');
    const handleMin = document.getElementById('handle-min');
    const handleMax = document.getElementById('handle-max');
    const sliderFill = document.getElementById('slider-fill');
    const dateDisplay = document.getElementById('date-display');
    const listContainer = document.getElementById('list-container');
    const resultCount = document.getElementById('result-count');
    const loadingStatus = document.getElementById('loading-status');
    const cancelOnlyToggle = document.getElementById('cancel-only-toggle');
    const sideFilters = document.getElementById('sideFilters');
    const dongAreaPanel = document.getElementById('dongAreaPanel');
    const dongAreaAptName = document.getElementById('dapAptName');
    const dongAreaAptMeta = document.getElementById('dapAptMeta');
    // [index_24_1] dongAreaAptSelect(#dapAptSelect) 참조 제거 — 드롭다운 은퇴
    const dongAreaResult = document.getElementById('dapResult');
    const btnCloseDongArea = document.getElementById('btnCloseDongArea');
    const dongAreaResizeHandle = document.getElementById('dongAreaResizeHandle');
    let showCancelledOnly = false;
    let txRegion = 'ulsan'; // [index_24] 거래량 패널 지역: 'ulsan'(../data) / 'busan'(../data/busan)
                            // [30_5] 'all'(울산+부산) 값 추가 — 시 필터 '전체'

    /* ══════════════════════════════════════════════════════════════════════
       [30_5] 거래량 패널 v0.8 — 목업 tx_panel_mockup_v0_8 이식
       ──────────────────────────────────────────────────────────────────────
       · 카드 = 거래 1건 (기존 li.trans-item 은 그대로 두고 뒤에서 덮어쓴다)
       · 칩 필터 : 시 → 군구 → 매매 → 분양 ······(우측) 기간
       · 미니 차트 = 그 거래의 전용면적만. 폴백(면적대·단지 전체) 없음.
       · 기간 팝오버에는 기존 .cp-head / .cp-slider-wrap 노드를 그대로 옮겨 담는다
         → 슬라이더 드래그 핸들러·거래 취소 토글이 재바인딩 없이 살아 있다.
       TX_PANEL_UI='legacy' 로 되돌리면 body.tx-v08 이 안 붙고 이 블록의
       진입점이 전부 조기 반환하므로 기존 화면이 그대로 복구된다.
       ══════════════════════════════════════════════════════════════════════ */
    const TX_PANEL_UI = 'v08';          // 'v08' (신규) / 'legacy' (기존 리스트)
    const TX_AREA_MIN_PTS = 2;          // 선을 그리려면 최소 2개월. 미만이면 '추이 데이터 부족'

    // 거래 1건의 전용면적 시계열 : '정규화이름|시군구코드|면적(2자리)' -> [{ym, y}, ...]
    // aptTrendMap(84타입 전용)과 별개로 loadAptTrendData 에서 함께 집계한다.
    let aptAreaTrendMap = {};

    /* silv 원본의 ownershipGbn — '분양권' / '입주권'. 파일마다 키 표기가 흔들릴 수 있어
       (ownershipGbn / ownershipgbn / OwnershipGbn) 대소문자 무시로 찾는다. 없으면 빈 문자열. */
    function txOwnershipGbn(item) {
      if (!item) return '';
      for (const k in item) {
        if (k.toLowerCase() === 'ownershipgbn') return valueTrim(item[k]);
      }
      return '';
    }
    // 입주권 여부. silv 소스이면서 ownershipGbn 이 '입'으로 시작하는 건만 입주권.
    const txIsIpju = (item) => !!item && item._source === 'silv' && txOwnershipGbn(item).indexOf('입') === 0;

    const txAreaKey = (v) => {
      const n = parseFloat(v);
      return Number.isFinite(n) ? n.toFixed(2) : '';
    };

    // 칩 필터 상태. txRegion 은 기존 변수를 그대로 쓰되 'all' 값을 새로 허용한다.
    let txGugun  = '';                  // '' = 전체, 아니면 sggCd 문자열
    let txSrcApt = true;                // 매매 표시
    let txSrcSilv = true;               // 분양권 표시  (둘 다 끄는 것은 막는다)
    let txSort   = 'recent';            // recent / price / area
    let txChipKind = null;              // 열려 있는 팝오버 종류

    /* ── 전용면적 스파크라인 : aptAreaTrendMap 조회 → SVG.
          폴백 없음. 그 면적의 관측이 2개월 미만이면 null 을 돌려준다. ── */
    function buildAreaTrendSparkSvg(nName, sggCd, area, H) {
      const key = nName + '|' + (sggCd == null ? '' : String(Number(sggCd))) + '|' + txAreaKey(area);
      const pts = aptAreaTrendMap[key];
      if (!pts || pts.length < TX_AREA_MIN_PTS) return null;

      const W = 200, padY = 6, padX = 3;
      const xs = pts.map(p => p.ym);
      const minX = xs[0], spanX = (xs[xs.length - 1] - minX) || 1;
      const ys = pts.map(p => p.y);
      const minY = Math.min(...ys), maxY = Math.max(...ys);
      const flat = maxY === minY, spanY = (maxY - minY) || 1;
      // ym(202409) 은 연·월 자릿수라 산술 간격이 아니다 → 월 인덱스로 환산해 x 를 잡는다
      const toIdx = (ym) => Math.floor(ym / 100) * 12 + (ym % 100 - 1);
      const i0 = toIdx(pts[0].ym), iSpan = (toIdx(pts[pts.length - 1].ym) - i0) || 1;
      const co = pts.map(p => [
        padX + ((toIdx(p.ym) - i0) / iSpan) * (W - 2 * padX),
        flat ? H / 2 : padY + (H - 2 * padY) * (1 - (p.y - minY) / spanY)
      ]);
      const line = buildMonotonePath(co);
      if (!line) return null;
      const first = pts[0].y, last = pts[pts.length - 1].y;
      const c = last > first ? '#e5484d' : last < first ? '#2563eb' : '#9ca3af';
      const lx = co[co.length - 1][0].toFixed(1), ly = co[co.length - 1][1].toFixed(1);
      const area2 = line + ` L ${co[co.length - 1][0].toFixed(1)},${H} L ${co[0][0].toFixed(1)},${H} Z`;
      const pct = flat ? 0 : ((last - first) / first * 100);
      return {
        svg: `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" role="img" aria-label="전용 ${txAreaKey(area)}㎡ 최근 시세 추이">`
           + `<path d="${area2}" fill="${c}" fill-opacity="0.10"/>`
           + `<path d="${line}" fill="none" stroke="${c}" stroke-width="1.7" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke"/>`
           + `<path d="M ${lx},${ly} L ${lx},${ly}" stroke="${c}" stroke-width="5.5" stroke-linecap="round" vector-effect="non-scaling-stroke"/></svg>`,
        pct
      };
    }

    /* ── 거래 1건 → 카드 innerHTML ── */
    function buildTxCardHtml(item, isNewTx) {
      const nName = normalizeName(item.aptNm);
      const sggCd = item.sggCd;
      const isApt = item._source !== 'silv';
      const isIpju = txIsIpju(item);                       // 분양권 ↔ 입주권 구분
      const tagCls = isApt ? 'apt' : (isIpju ? 'ipju' : 'silv');
      const tagTxt = isApt ? '매매' : (isIpju ? '입주권' : '분양권');
      const area  = parseFloat(item.excluUseAr);
      const amtNum = parseInt(String(item.dealAmount).replace(/,/g, ''), 10);
      const dateStr = `${String(item.dealYear).slice(2)}.${String(item.dealMonth).padStart(2,'0')}.${String(item.dealDay).padStart(2,'0')}`;
      const isCx = !isNormalDeal(item);

      // 준공년도 : 거래 레코드의 buildYear 우선, 없으면 apt_master 메타(aptMetaMap) 폴백
      let by = Number(item.buildYear);
      if (!Number.isFinite(by) || by <= 0) {
        const meta = aptMetaMap.get(nName + '|' + Number(sggCd));
        by = meta && Number.isFinite(meta.buildYear) ? meta.buildYear : null;
      }
      // dealingGbn : 현재 수집 파이프라인이 저장하지 않는 필드다.
      //   trades_item.php 가 원본 필드를 그대로 담기 시작하면 자동으로 배지가 뜬다.
      //   값이 없으면 배지를 생략한다(빈 칸을 만들지 않는다).
      const gbnRaw = valueTrim(item?.dealingGbn);
      const gbnHtml = gbnRaw
        ? `<span class="txc-gbn ${gbnRaw.indexOf('직') >= 0 ? 'jik' : 'jung'}">${gbnRaw.indexOf('직') >= 0 ? '직거래' : '중개'}</span>`
        : '';

      const guName = sggCdToGu(sggCd) || '';
      const dongName = valueTrim(item.umdNm).split(/\s+/).pop() || '';
      const regionPrefix = (txRegion === 'all') ? (isBusanSgg(sggCd) ? '부산 ' : '울산 ') : '';
      const byHtml = Number.isFinite(by) && by > 0 ? `<span class="sep">·</span>${by}년 준공` : '';

      const tr = buildAreaTrendSparkSvg(nName, sggCd, area, 58);
      let chart;
      if (tr) {
        const cls = tr.pct > 0.05 ? 'up' : tr.pct < -0.05 ? 'dn' : 'fl';
        const pctTxt = (tr.pct > 0 ? '+' : '') + tr.pct.toFixed(1) + '%';
        chart = `<div class="txc-spark">${tr.svg}</div>`
              + `<div class="txc-sparkfoot"><span class="txc-ar">${txAreaKey(area)}㎡</span>`
              + `<span class="txc-pct ${cls}">${pctTxt}</span></div>`;
      } else {
        chart = `<div class="txc-spark-empty">추이<br>데이터 부족</div>`;
      }

      return `<div class="txc-left">
          <div class="txc-name">${escapeHtml(item.aptNm)}<span class="txc-tag ${tagCls}">${tagTxt}</span>${isCx ? '<span class="txc-tag cx">취소</span>' : ''}${isNewTx ? '<span class="txc-new">NEW</span>' : ''}</div>
          <div class="txc-sub">${regionPrefix}${escapeHtml(guName)} ${escapeHtml(dongName)}${byHtml}</div>
          <div class="txc-amt">${Number.isFinite(amtNum) ? amtNum.toLocaleString() : escapeHtml(String(item.dealAmount))}만원</div>
          <div class="txc-deal"><span>${dateStr}</span><span class="sep">·</span><span class="nw">${escapeHtml(String(item.excluUseAr))}㎡</span><span class="sep">·</span><span class="nw">${escapeHtml(String(item.floor))}층</span>${gbnHtml}</div>
        </div>
        <div class="txc-right">${chart}</div>`;
    }

    /* ── 칩 라벨/활성 상태 동기화 ── */
    function syncTxChips() {
      if (TX_PANEL_UI !== 'v08') return;
      const row = document.getElementById('txChipRow');
      if (!row) return;
      const label = {
        region: (txRegion === 'all') ? '전체' : (txRegion === 'busan') ? '부산' : '울산',
        gugun:  txGugun ? (sggCdToGu(txGugun) || '군구') : '군구',
        period: '기간'
      };
      row.querySelectorAll('.txchip').forEach(c => {
        const pop = c.dataset.txpop, tg = c.dataset.txtoggle;
        if (pop && label[pop] !== undefined) c.firstChild.nodeValue = label[pop];
        if (pop === 'region') c.classList.add('on');                 // 지역은 항상 값이 있다 → 항상 활성색
        else if (pop === 'gugun')  c.classList.toggle('on', !!txGugun);
        else if (pop === 'period') c.classList.toggle('on', !!showCancelledOnly);
        if (tg === 'apt')  c.classList.toggle('on', txSrcApt);
        if (tg === 'silv') c.classList.toggle('on', txSrcSilv);
      });
      document.querySelectorAll('#txListHead .lh-sort button').forEach(b => {
        b.classList.toggle('on', b.dataset.txsort === txSort);
      });
    }

    /* ── 칩 팝오버 ── */
    function closeTxChip() {
      txChipKind = null;
      const pop = document.getElementById('txChipPop');
      const scrim = document.getElementById('txChipScrim');
      if (pop) pop.classList.remove('open');
      if (scrim) scrim.classList.remove('open');
      document.querySelectorAll('#txChipRow .txchip').forEach(c => c.classList.remove('open'));
    }
    function openTxChip(kind, anchor) {
      if (txChipKind === kind) { closeTxChip(); return; }
      closeTxChip();
      txChipKind = kind;
      anchor.classList.add('open');
      const pop = document.getElementById('txChipPop');
      const host = document.getElementById('txPeriodHost');

      if (kind === 'period') {
        // 기존 슬라이더 노드를 그대로 보여준다(이동은 init 에서 1회 끝냈다)
        pop.innerHTML = '';
        pop.appendChild(host);
        host.style.display = '';
      } else {
        host.style.display = 'none';
        if (host.parentNode === pop) document.getElementById('transactionPanel').appendChild(host);
        const opt = (name, list, cur) => '<div class="txpop-opts">' + list.map(([v, l]) =>
          `<button type="button" class="txpop-opt${String(cur) === String(v) ? ' on' : ''}" data-txp="${name}" data-txv="${v}">${escapeHtml(l)}</button>`).join('') + '</div>';
        if (kind === 'region') {
          pop.innerHTML = '<h4>시</h4>' + opt('region', [['all','전체'],['ulsan','울산'],['busan','부산']], txRegion);
        } else if (kind === 'gugun') {
          // 군구 목록은 현재 시 선택에 따라 달라진다. 울산·부산 모두 광역시라 '시'가 없어 '군구'.
          const ul = [31110,31140,31170,31200,31710];
          const bs = [26110,26140,26170,26200,26230,26260,26290,26320,26350,26380,26410,26440,26470,26500,26530,26710];
          let h = '<h4>군구</h4>' + opt('gugun', [['','전체']], txGugun);
          if (txRegion !== 'busan') h += (txRegion === 'all' ? '<h4>울산</h4>' : '') + opt('gugun', ul.map(s => [String(s), sggCdToGu(s)]), txGugun);
          if (txRegion !== 'ulsan') h += (txRegion === 'all' ? '<h4>부산</h4>' : '') + opt('gugun', bs.map(s => [String(s), sggCdToGu(s)]), txGugun);
          pop.innerHTML = h;
        }
      }
      const a = anchor.getBoundingClientRect();
      const fr = document.getElementById('transactionPanel').getBoundingClientRect();
      pop.style.top = (a.bottom - fr.top + 8) + 'px';
      pop.classList.add('open');
      document.getElementById('txChipScrim').classList.add('open');
    }

    /* ── 모바일 바텀시트 : 50 / 75 / 100 % 3단 스냅 ── */
    function txSheetSetPct(p) {
      document.documentElement.style.setProperty('--tx-sheet-h', p + '%');
    }

    /* ── 초기화 : 마크업 배선 + 기존 슬라이더 노드 이동 ── */
    function initTxPanelV08() {
      // 클래스는 body 첫머리 인라인 스크립트가 이미 붙여 뒀다(로드 직후 깜빡임 방지).
      // 여기서는 롤백 시 도로 떼어내는 일만 한다.
      if (TX_PANEL_UI !== 'v08') { document.body.classList.remove('tx-v08'); return; }

      const panel = document.getElementById('transactionPanel');
      const host  = document.getElementById('txPeriodHost');
      // 기존 컨트롤 패널의 헤더·슬라이더를 팝오버용 호스트로 이동.
      // appendChild 는 리스너를 유지하므로 슬라이더 드래그·거래 취소 토글이 그대로 산다.
      const cpHead = panel.querySelector('.control-panel .cp-head');
      const cpWrap = panel.querySelector('.control-panel .cp-slider-wrap');
      if (cpHead) host.appendChild(cpHead);
      if (cpWrap) host.appendChild(cpWrap);
      host.style.display = 'none';
      txSheetSetPct(75);

      // 칩
      document.getElementById('txChipRow').addEventListener('click', (e) => {
        const c = e.target.closest('.txchip');
        if (!c) return;
        if (c.dataset.txtoggle) {
          const which = c.dataset.txtoggle;
          // 둘 다 끄면 아무것도 안 보이므로, 마지막 하나는 끄지 못하게 막는다
          if (which === 'apt'  && txSrcApt  && !txSrcSilv) return;
          if (which === 'silv' && txSrcSilv && !txSrcApt)  return;
          if (which === 'apt')  txSrcApt  = !txSrcApt;
          if (which === 'silv') txSrcSilv = !txSrcSilv;
          closeTxChip(); syncTxChips(); loadCurrentRangeData();
          return;
        }
        openTxChip(c.dataset.txpop, c);
      });
      document.getElementById('txChipPop').addEventListener('click', (e) => {
        const o = e.target.closest('[data-txp]');
        if (!o) return;
        if (o.dataset.txp === 'region') { txRegion = o.dataset.txv; txGugun = ''; }
        else if (o.dataset.txp === 'gugun') { txGugun = o.dataset.txv; }
        closeTxChip(); syncTxChips(); loadCurrentRangeData();
      });
      document.getElementById('txChipScrim').addEventListener('click', closeTxChip);

      // 정렬
      document.getElementById('txListHead').addEventListener('click', (e) => {
        const b = e.target.closest('[data-txsort]');
        if (!b) return;
        txSort = b.dataset.txsort;
        syncTxChips();
        loadCurrentRangeData();
      });

      // 카드 클릭 → 지도 이동
      document.getElementById('list-container').addEventListener('click', (e) => {
        const li = e.target.closest('li.txc-card');
        if (!li || !li.dataset.txlat) return;
        const lat = parseFloat(li.dataset.txlat), lng = parseFloat(li.dataset.txlng);
        if (!Number.isFinite(lat) || !Number.isFinite(lng)) return;
        map.panTo(new kakao.maps.LatLng(lat, lng));
      });

      // 바텀시트 그래버 (모바일)
      const grab = document.getElementById('txSheetGrab');
      if (grab) {
        const SNAPS = [50, 75, 100];
        let dragging = false, startY = 0, startPct = 75, curPct = 75;
        grab.addEventListener('pointerdown', (e) => {
          dragging = true; startY = e.clientY;
          startPct = panel.getBoundingClientRect().height / (window.innerHeight || 1) * 100;
          panel.classList.add('tx-dragging');
          grab.setPointerCapture(e.pointerId);
        });
        grab.addEventListener('pointermove', (e) => {
          if (!dragging) return;
          curPct = Math.min(100, Math.max(22, startPct + (startY - e.clientY) / (window.innerHeight || 1) * 100));
          txSheetSetPct(curPct);
        });
        const endDrag = () => {
          if (!dragging) return;
          dragging = false;
          panel.classList.remove('tx-dragging');
          curPct = SNAPS.reduce((b, s) => Math.abs(s - curPct) < Math.abs(b - curPct) ? s : b, SNAPS[0]);
          txSheetSetPct(curPct);
        };
        grab.addEventListener('pointerup', endDrag);
        grab.addEventListener('pointercancel', endDrag);
      }

      syncTxChips();
    }


    function getDateFromIndex(idx) {
        let total = (START_YEAR * 12) + (START_MONTH - 1) + idx;
        let y = Math.floor(total / 12);
        let m = (total % 12) + 1;
        return { y, m };
    }

    function updateSliderView() {
        const minPer = (currentMin / TOTAL_STEPS) * 100;
        const maxPer = (currentMax / TOTAL_STEPS) * 100;
        handleMin.style.left = `${minPer}%`; handleMax.style.left = `${maxPer}%`;
        sliderFill.style.left = `${minPer}%`; sliderFill.style.width = `${maxPer - minPer}%`;
        if (currentMin === currentMax) {
            if (currentMin === TOTAL_STEPS) { handleMin.style.zIndex = 20; handleMax.style.zIndex = 10; }
            else if (currentMin === 0) { handleMax.style.zIndex = 20; handleMin.style.zIndex = 10; }
            else { handleMin.style.zIndex = 20; handleMax.style.zIndex = 10; }
        } else {
            handleMin.style.zIndex = 11; handleMax.style.zIndex = 10;
        }
        const sDate = getDateFromIndex(currentMin);
        const eDate = getDateFromIndex(currentMax);
        dateDisplay.textContent = `${sDate.y}년 ${String(sDate.m).padStart(2,'0')}월 ~ ${eDate.y}년 ${String(eDate.m).padStart(2,'0')}월`;
    }

    function initSlider() {
        updateSliderView();
        function getStep(e) {
            const rect = sliderContainer.getBoundingClientRect();
            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
            let x = clientX - rect.left;
            if (x < 0) x = 0; if (x > rect.width) x = rect.width;
            return Math.round((x / rect.width) * TOTAL_STEPS);
        }
        function handleDrag(isMin) {
            return function(e) {
                const step = getStep(e);
                if (isMin) currentMin = Math.min(step, currentMax);
                else currentMax = Math.max(step, currentMin);
                updateSliderView();
            }
        }
        function addEvent(el, isMin) {
            const onMove = handleDrag(isMin);
            function onEnd() {
                document.removeEventListener('mousemove', onMove);
                document.removeEventListener('mouseup', onEnd);
                document.removeEventListener('touchmove', onMove);
                document.removeEventListener('touchend', onEnd);
                loadCurrentRangeData();
            }
            el.addEventListener('mousedown', (e) => {
                e.preventDefault(); document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onEnd);
            });
            el.addEventListener('touchstart', (e) => {
                document.addEventListener('touchmove', onMove); document.addEventListener('touchend', onEnd);
            }, {passive:false});
        }
        addEvent(handleMin, true);
        addEvent(handleMax, false);
    }

    async function loadCurrentRangeData() {
        if(!isTransactionMode) return;

        loadingStatus.textContent = "불러오는 중...";
        listContainer.innerHTML = "";

        const sDate = getDateFromIndex(currentMin);
        const eDate = getDateFromIndex(currentMax);

        let aptFiles = [];
        let silvFiles = [];
        let aptOldFiles = [];
        let silvOldFiles = [];
        let cy = sDate.y, cm = sDate.m;
        // [index_24] 선택 지역의 거래 파일만 로드 (울산=../data, 부산=../data/busan). _old 백업도 동일 base.
        const txBase = (txRegion === 'busan') ? '../data/busan' : '../data';

        while (true) {
            if (cy > eDate.y || (cy === eDate.y && cm > eDate.m)) break;
            const mm = String(cm).padStart(2,'0');
            aptFiles.push(`${txBase}/apt/data_${cy}_${mm}.json`);
            aptOldFiles.push(`${txBase}/apt/data_${cy}_${mm}_old.json`);
            silvFiles.push(`${txBase}/silv/silv_${cy}_${mm}.json`);
            silvOldFiles.push(`${txBase}/silv/silv_${cy}_${mm}_old.json`);
            cm++; if (cm > 12) { cm = 1; cy++; }
        }

        // [30_5] 시 필터가 '전체'면 부산 파일 목록을 뒤에 덧붙인다.
        //   위 while 루프는 txBase(= '../data', 울산)로 이미 돌았으므로 무수정.
        if (TX_PANEL_UI === 'v08' && txRegion === 'all') {
            let by = sDate.y, bm = sDate.m;
            while (true) {
                if (by > eDate.y || (by === eDate.y && bm > eDate.m)) break;
                const mm2 = String(bm).padStart(2,'0');
                aptFiles.push(`../data/busan/apt/data_${by}_${mm2}.json`);
                aptOldFiles.push(`../data/busan/apt/data_${by}_${mm2}_old.json`);
                silvFiles.push(`../data/busan/silv/silv_${by}_${mm2}.json`);
                silvOldFiles.push(`../data/busan/silv/silv_${by}_${mm2}_old.json`);
                bm++; if (bm > 12) { bm = 1; by++; }
            }
        }

        async function fetchTagged(file, source) {
            if (fileCache[file]) return fileCache[file];
            try {
                const res = await fetch(file);
                if (!res.ok) return [];
                const json = await res.json();
                const tagged = json.map(item => ({ ...item, _source: source }));
                fileCache[file] = tagged;
                return tagged;
            } catch (e) { return []; }
        }

        // old 파일은 캐시하지 않음 (data.php/silv.php 실행 시 변경됨)
        async function fetchOldRaw(file) {
            try {
                const res = await fetch(file, { cache: 'no-store' });
                if (!res.ok) return [];
                return await res.json();
            } catch (e) { return []; }
        }

        const aptPromises = aptFiles.map(f => fetchTagged(f, 'apt'));
        const silvPromises = silvFiles.map(f => fetchTagged(f, 'silv'));
        const aptOldPromises = aptOldFiles.map(f => fetchOldRaw(f));
        const silvOldPromises = silvOldFiles.map(f => fetchOldRaw(f));

        const [aptResults, silvResults, aptOldResults, silvOldResults] = await Promise.all([
            Promise.all(aptPromises),
            Promise.all(silvPromises),
            Promise.all(aptOldPromises),
            Promise.all(silvOldPromises)
        ]);

        // old 데이터의 거래 키 Set 구축
        function makeTxKey(item) {
            return [
                normalizeName(item?.aptNm),
                valueTrim(item?.sggCd),
                valueTrim(item?.umdNm),
                valueTrim(item?.floor),
                valueTrim(item?.excluUseAr),
                normalizeDealAmount(item?.dealAmount),
                valueTrim(item?.dealYear),
                valueTrim(item?.dealMonth),
                valueTrim(item?.dealDay)
            ].join('|');
        }

        const oldKeySet = new Set();
        [...aptOldResults, ...silvOldResults].flat().forEach(item => {
            if (isNormalDeal(item)) oldKeySet.add(makeTxKey(item));
        });

        // 신규 거래 아파트 Set (old 파일이 하나라도 존재할 때만 비교)
        const hasOldData = [...aptOldResults, ...silvOldResults].some(arr => arr.length > 0);
        const newAptSet = new Set();
        if (hasOldData) {
            [...aptResults, ...silvResults].flat().forEach(item => {
                if (isNormalDeal(item) && !oldKeySet.has(makeTxKey(item))) {
                    newAptSet.add(normalizeName(item.aptNm));
                }
            });
        }

        // [v16_3] 거래 단위 신규 키 집합 — 시세 추이 카드 '기간 내 거래 내역' 표 NEW 배지용
        summaryNewTxKeySet = new Set();
        if (hasOldData) {
            [...aptResults, ...silvResults].flat().forEach(item => {
                if (isNormalDeal(item) && !oldKeySet.has(makeTxKey(item))) {
                    summaryNewTxKeySet.add(makeTxKey(item));
                }
            });
        }

        const results = [...aptResults, ...silvResults];
        const allData = results.flat();
        let loadedData = showCancelledOnly
          ? getVisibleCancelledDeals(allData)
          : allData.filter(item => isNormalDeal(item));

        // [30_5] 칩 필터 적용 — 군구 / 매매·분양 토글. 기존 loadedData 산출 로직은 무수정.
        if (TX_PANEL_UI === 'v08') {
            loadedData = loadedData.filter(item => {
                if (txGugun && String(Number(item.sggCd)) !== String(Number(txGugun))) return false;
                const isAptItem = item._source !== 'silv';
                if (isAptItem && !txSrcApt) return false;
                if (!isAptItem && !txSrcSilv) return false;
                return true;
            });
        }

        loadedData.sort((a, b) => {
            const da = a.dealYear*10000 + a.dealMonth*100 + a.dealDay;
            const db = b.dealYear*10000 + b.dealMonth*100 + b.dealDay;
            if(db !== da) return db - da;
            let pA = parseInt(String(a.dealAmount).replace(/,/g, ''));
            let pB = parseInt(String(b.dealAmount).replace(/,/g, ''));
            return pB - pA;
        });

        // [30_5] 카드가 거래 단위라 '건수순'이 성립하지 않는다 → 최신/고가/면적 3종.
        //   기본값 recent 는 위 기존 정렬과 동일 결과라 덮어써도 변화가 없다.
        if (TX_PANEL_UI === 'v08') {
            const dnum = it => it.dealYear*10000 + it.dealMonth*100 + it.dealDay;
            const amtN = it => parseInt(String(it.dealAmount).replace(/,/g, ''), 10) || 0;
            if (txSort === 'price')      loadedData.sort((a,b) => amtN(b)-amtN(a) || dnum(b)-dnum(a));
            else if (txSort === 'area')  loadedData.sort((a,b) => (parseFloat(b.excluUseAr)||0)-(parseFloat(a.excluUseAr)||0) || amtN(b)-amtN(a));
        }

        loadingStatus.textContent = "완료";
        // [v15] 시안 D 의도: 큰 숫자 + 작은 단위. 단위 '건'은 CSS .cp-num::after로 표시
        resultCount.textContent = loadedData.length.toLocaleString();

        // [30_5] 헤더가 팝오버로 들어갔으므로 리스트 헤더에도 건수를 띄운다.
        //   showCancelledOnly 가 켜져 있으면 팝오버 밖에서도 보이게 배지를 붙인다.
        if (TX_PANEL_UI === 'v08') {
            const cntEl = document.getElementById('txListCnt');
            if (cntEl) {
                const nApt = new Set(loadedData.map(it => normalizeName(it.aptNm) + '|' + Number(it.sggCd))).size;
                cntEl.innerHTML = (showCancelledOnly ? '<span class="lh-cx">거래 취소</span>' : '')
                    + `<b>${loadedData.length.toLocaleString()}</b>건 <span class="lh-sub">· ${nApt}개 단지</span>`;
            }
            syncTxChips();
        }

        if (loadedData.length === 0) {
            listContainer.innerHTML = `<li class="loading-msg">${showCancelledOnly ? '거래 취소 내역이 없습니다.' : '거래 내역이 없습니다.'}</li>`;
            clearDrawn();
            return;
        }

        const fragment = document.createDocumentFragment();

        const countMapApt = {};
        const countMapSilv = {};

        loadedData.forEach(item => {
            const li = document.createElement('li');
            li.className = 'trans-item';
            const dateStr = `${String(item.dealYear).slice(2)}.${String(item.dealMonth).padStart(2,'0')}.${String(item.dealDay).padStart(2,'0')}`;
            const isApt = item._source !== 'silv';
            const sourceTag = isApt
              ? '<span class="source-tag apt">매매</span>'
              : '<span class="source-tag silv">분양권</span>';
            li.innerHTML = `
                <div>
                    <div class="apt-name">${item.aptNm}${sourceTag} <span style="font-weight:normal; font-size:0.9em; color:#888;">(${item.floor}층)</span></div>
                    <div class="apt-sub">${item.umdNm} | 전용 ${item.excluUseAr}㎡ | ${dateStr}</div>
                </div>
                <div class="price">${item.dealAmount}만원</div>
            `;
            // [30_5] v08 카드로 덮어쓴다. 위 기존 대입은 한 줄도 지우지 않았으므로
            //   TX_PANEL_UI='legacy' 로 되돌리면 즉시 기존 리스트가 복구된다.
            if (TX_PANEL_UI === 'v08') {
                const isNewTx = hasOldData && !oldKeySet.has(makeTxKey(item));
                li.className = 'txc-card' + (isNormalDeal(item) ? '' : ' cx');
                li.innerHTML = buildTxCardHtml(item, isNewTx);
                // 카드 클릭 → 지도 이동. 좌표는 APTS 에서 '정규화이름|시군구코드'로 찾는다.
                const coord = APTS.find(a =>
                    normalizeName(a.aptNm) === normalizeName(item.aptNm) &&
                    Number(a.sggCd) === Number(item.sggCd));
                if (coord) { li.dataset.txlat = coord.lat; li.dataset.txlng = coord.lng; }
            }
            fragment.appendChild(li);

            const nName = normalizeName(item.aptNm);
            if (isApt) {
                countMapApt[nName] = (countMapApt[nName] || 0) + 1;
            } else {
                countMapSilv[nName] = (countMapSilv[nName] || 0) + 1;
            }
        });
        listContainer.appendChild(fragment);

        // 합산 countMap
        const countMapAll = {};
        const allKeys = new Set([...Object.keys(countMapApt), ...Object.keys(countMapSilv)]);
        allKeys.forEach(k => {
            countMapAll[k] = (countMapApt[k] || 0) + (countMapSilv[k] || 0);
        });

        // [index_24] 토글 지역의 단지에만 마커 표시 — 동명 단지가 타 지역에 있어도 오표시 방지
        const regionApts = (txRegion === 'busan')
          ? APTS.filter(a => isBusanSgg(a.sggCd))
          : APTS.filter(a => !isBusanSgg(a.sggCd));
        // [30_5] 시 필터가 '전체'면 지역 제한 없이 APTS 전부를 후보로 쓴다.
        const regionAptsEff = (TX_PANEL_UI === 'v08' && txRegion === 'all') ? APTS : regionApts;
        const mapTargets = regionAptsEff.filter(a => countMapAll.hasOwnProperty(normalizeName(a.aptNm)));
        drawMarkers(mapTargets, countMapAll, countMapApt, countMapSilv, newAptSet);

        if(mapTargets.length > 0) {
            toast(`${mapTargets.length}개 단지 표시됨`, 1000);
        }
    }

    const brandList = document.getElementById('brandList');
    const transactionPanel = document.getElementById('transactionPanel');
    const btnTransaction = document.getElementById('btnTransaction');
    const rightFilters = document.getElementById('rightFilters');
    let activePanel = null;

    const stationList = document.getElementById('stationList');
    const stationDisclaimer = document.getElementById('stationDisclaimer');

    // [v14_9] 경고 배너 한 번 닫으면 세션 동안 다시 보이지 않음
    let disclaimerDismissed = false;
    const stationDisclaimerClose = document.getElementById('stationDisclaimerClose');
    if (stationDisclaimerClose) {
      stationDisclaimerClose.addEventListener('click', (e) => {
        e.stopPropagation();
        disclaimerDismissed = true;
        stationDisclaimer.style.display = 'none';
      });
    }


    /* ===== [초등 학구도/통학로 기능] ===== */
    const SCHOOL_ZONE_JSON_URL = "school_zones_ulsan.json";
    const SCHOOL_ZONE_JSON_URL_BUSAN = "school_zones_busan.json";
    const SCHOOL_LOCATION_JSON_URL = "school_locations_all.json";
    const SCHOOL_PALETTE = ['#FFFACD', '#FFE4E1', '#c2fff7', '#ddd6fe'];
    const SCHOOL_LINE_PALETTE = ['#ffbf00', '#ff007f', '#00ffcc', '#8a2be2'];
    const SCHOOL_ZONE_COLOR_MAP = {"Z000101627":3,"Z000101674":1,"Z000101628":1,"Z000101651":3,"Z000101633":2,"Z000150913":2,"Z000150914":1,"Z000101661":2,"Z000101734":3,"Z000101655":0,"Z000101675":3,"Z000101701":3,"Z000101704":2,"Z000151114":3,"Z000101685":3,"Z000101634":3,"Z000106212":2,"Z000101653":1,"Z000101700":3,"Z000101666":3,"Z000150911":3,"Z000106276":3,"Z000101682":0,"Z000101624":0,"Z000101717":2,"Z000101729":3,"Z000106213":3,"Z000101637":2,"Z000101731":0,"Z000101698":1,"Z000101710":0,"Z000101714":2,"Z000101711":2,"Z000101695":3,"Z000101643":3,"Z000101678":0,"Z000101739":2,"Z000101723":2,"Z000101706":3,"Z000101703":1,"Z000101679":1,"Z000101742":2,"Z000101733":2,"Z000101705":1,"Z000101736":1,"Z000101687":3,"Z000101663":0,"Z000101694":2,"Z000101677":3,"Z000101684":0,"Z000101713":0,"Z000101638":0,"Z000150915":2,"Z000101657":0,"Z000101707":3,"Z000150916":1,"Z000101730":1,"Z000101681":2,"Z000101662":0,"Z000101645":0,"Z000101672":1,"Z000101709":3,"Z000150097":1,"Z000101724":0,"Z000101708":1,"Z000101650":2,"Z000101658":3,"Z000101722":3,"Z000101676":0,"Z000101664":2,"Z000101652":2,"Z000101673":2,"Z000101626":0,"Z000101690":2,"Z000101639":0,"Z000101686":2,"Z000101669":1,"Z000101741":0,"Z000101636":3,"Z000101719":0,"Z000101640":0,"Z000101630":1,"Z000101641":1,"Z000101648":2,"Z000101646":1,"Z000101702":1,"Z000101625":2,"Z000150746":2,"Z000101732":2,"Z000101671":2,"Z000101629":0,"Z000101667":1,"Z000101631":1,"Z000101737":2,"Z000101696":3,"Z000101735":1,"Z000101712":3,"Z000101697":0,"Z000101644":1,"Z000101649":1,"Z000101680":0,"Z000101670":1,"Z000101727":0,"Z000106380":1,"Z000101721":2,"Z000101716":0,"Z000101691":3,"Z000101692":0,"Z000106298":3,"Z000101693":0,"Z000101699":0,"Z000101654":1,"Z000101635":3,"Z000101668":2,"Z000101642":1,"Z000101715":0,"Z000101740":2,"Z000101738":1,"Z000101632":0,"Z000101659":2,"Z000101665":3,"Z000106451":1,"Z000101656":3,"Z000106144":0,"Z000151589":0,"Z000151588":1,"Z000100576":1,"Z000100562":1,"Z000100598":3,"Z000100581":3,"Z000106316":3,"Z000100750":1,"Z000100620":3,"Z000100800":3,"Z000100632":1,"Z000100647":0,"Z000100768":3,"Z000151030":0,"Z000100738":3,"Z000100689":0,"Z000100817":0,"Z000100710":2,"Z000100843":1,"Z000100708":1,"Z000100596":2,"Z000106246":3,"Z000100578":2,"Z000100639":3,"Z000100790":1,"Z000100659":2,"Z000100680":0,"Z000100720":2,"Z000100765":2,"Z000100740":3,"Z000100725":2,"Z000100691":1,"Z000100717":3,"Z000100684":3,"Z000100850":3,"Z000100678":3,"Z000100637":2,"Z000100658":1,"Z000100822":0,"Z000100754":2,"Z000100782":2,"Z000100739":3,"Z000100711":3,"Z000100654":3,"Z000100669":1,"Z000100761":3,"Z000100693":2,"Z000100660":3,"Z000100803":0,"Z000100798":2,"Z000106162":1,"Z000151109":3,"Z000100842":3,"Z000151110":2,"Z000100628":2,"Z000100831":0,"Z000100675":3,"Z000100588":0,"Z000100563":1,"Z000100763":2,"Z000100568":3,"Z000100832":2,"Z000100854":3,"Z000100792":3,"Z000100747":2,"Z000100848":3,"Z000100573":3,"Z000100618":3,"Z000100722":1,"Z000150055":3,"Z000100574":3,"Z000100561":0,"Z000100567":1,"Z000100787":0,"Z000100622":3,"Z000100733":1,"Z000100779":3,"Z000100593":1,"Z000100734":0,"Z000100640":0,"Z000100762":1,"Z000100585":2,"Z000100713":0,"Z000100719":3,"Z000100705":0,"Z000100699":2,"Z000100828":1,"Z000100797":0,"Z000100833":3,"Z000100845":2,"Z000100794":0,"Z000100643":3,"Z000100645":1,"Z000100703":3,"Z000100795":3,"Z000100580":3,"Z000100811":2,"Z000100672":3,"Z000100825":2,"Z000100812":3,"Z000100609":0,"Z000100558":0,"Z000100852":1,"Z000100847":2,"Z000100735":3,"Z000100771":2,"Z000100599":3,"Z000100764":0,"Z000100853":2,"Z000100810":2,"Z000100836":3,"Z000100749":1,"Z000100633":0,"Z000100773":2,"Z000100841":3,"Z000100844":0,"Z000100564":2,"Z000100793":0,"Z000100610":2,"Z000100636":2,"Z000100559":3,"Z000100748":1,"Z000100752":2,"Z000100572":3,"Z000100819":3,"Z000100818":0,"Z000100816":3,"Z000100829":1,"Z000100821":3,"Z000100606":0,"Z000100808":1,"Z000100851":2,"Z000100624":0,"Z000100627":3,"Z000100631":2,"Z000100776":0,"Z000100683":1,"Z000100826":0,"Z000100786":0,"Z000100583":0,"Z000100584":1,"Z000100698":1,"Z000100644":0,"Z000100730":1,"Z000100575":1,"Z000100597":3,"Z000100820":2,"Z000100840":1,"Z000100807":0,"Z000100594":1,"Z000100712":3,"Z000100731":0,"Z000100671":0,"Z000100642":2,"Z000100809":3,"Z000100727":2,"Z000100577":1,"Z000100657":1,"Z000100600":1,"Z000100673":3,"Z000100629":0,"Z000100815":1,"Z000100603":1,"Z000100742":0,"Z000100805":2,"Z000100566":0,"Z000100661":0,"Z000100570":2,"Z000100707":3,"Z000100623":1,"Z000100775":0,"Z000100772":2,"Z000100746":3,"Z000100652":2,"Z000100634":1,"Z000100737":2,"Z000100638":2,"Z000100626":1,"Z000100565":2,"Z000100662":0,"Z000100813":3,"Z000100849":0,"Z000100697":2,"Z000100839":1,"Z000100709":2,"Z000100770":0,"Z000100789":2,"Z000100617":2,"Z000100619":2,"Z000100625":1,"Z000100696":1,"Z000100648":2,"Z000100702":0,"Z000100767":0,"Z000100778":2,"Z000100785":0,"Z000100679":2,"Z000100704":0,"Z000100687":2,"Z000100756":3,"Z000100823":0,"Z000100685":0,"Z000100784":1,"Z000100560":2,"Z000100656":1,"Z000100695":3,"Z000100604":2,"Z000100838":1,"Z000100804":3,"Z000100743":2,"Z000100601":2,"Z000100688":1,"Z000100706":2,"Z000100607":3,"Z000100736":0,"Z000100780":1,"Z000100783":0,"Z000100769":2,"Z000100846":3,"Z000150053":3,"Z000150054":0,"Z000100729":3,"Z000100724":0,"Z000100758":0,"Z000100827":3,"Z000100806":1,"Z000100589":1,"Z000100592":3,"Z000100686":1,"Z000106347":2,"Z000100676":0,"Z000100774":1,"Z000100791":2,"Z000100641":3,"Z000100760":2,"Z000100663":1,"Z000100723":1,"Z000150056":0,"Z000100677":1,"Z000100616":0,"Z000150049":3,"Z000100814":3,"Z000100799":1,"Z000100796":0,"Z000100824":1,"Z000100802":1,"Z000100586":3,"Z000100646":2,"Z000100830":2,"Z000100569":2,"Z000100571":1,"Z000100855":3,"Z000100721":2,"Z000106262":2,"Z000106134":0,"Z000151431":3,"Z000100694":0,"Z000100674":2,"Z000100615":1,"Z000100621":1,"Z000100653":0,"Z000100630":1,"Z000100605":2,"Z000100579":2,"Z000100837":1,"Z000100635":1,"Z000100801":0,"Z000100701":2,"Z000100692":1,"Z000100681":0,"Z000100759":0,"Z000100690":1,"Z000100753":1,"Z000150051":0,"Z000100834":0,"Z000100682":0,"Z000100718":3,"Z000100595":2,"Z000100582":0,"Z000100587":2,"Z000106373":1,"Z000100602":1,"Z000100714":3,"Z000100591":2,"Z000151509":0,"Z000100608":0,"Z000151508":1,"Z000100716":1,"Z000100781":1,"Z000100728":0,"Z000100777":0,"Z000100751":3,"Z000100788":1,"Z000100732":2,"Z000100670":0,"Z000100715":1,"Z000100650":1,"Z000100655":0,"Z000100666":2,"Z000100614":0,"Z000100613":2,"Z000100611":0,"Z000151585":3,"Z000100668":0,"Z000100649":1,"Z000100651":2,"Z000100757":1,"Z000100745":2,"Z000150649":1,"Z000106447":0,"Z000100755":3};

    const SCHOOL_STROKE_MODE = 'white';
    const SCHOOL_FILL_OPACITY = 0.45;
    const SCHOOL_STROKE_WEIGHT = 2.8;
    const SCHOOL_STROKE_OPACITY = 1.0;
    const SCHOOL_LINE_WIDTH = 2.2;
    const SCHOOL_LINE_OPACITY = 0.95;
    const SCHOOL_PULSE_EPOCH = performance.now();
    const SCHOOL_PULSE_DURATION = 1200;
    const SCHOOL_FLOW_DURATION = 1500;
    // [index_17_GPT_fast] 초등 학구도/통학선은 현재 화면 주변만 렌더링한다.
    // 아파트 라벨/학교 라벨은 기존 동작을 유지하고, 폴리곤 + SVG path 생성량만 줄인다.
    const SCHOOL_VIEWPORT_PADDING_RATIO = 0.20;

    let schoolZones = [];
    let schoolDataReady = false;
    let schoolDataLoading = null;
    let isSchoolMode = false;
    let schoolDist = null; // [index_20] 디폴트를 '전체'로 두지 않음 → 미선택 상태
    let schoolDisclaimerDismissed = false;
    let schoolPathSvg = null;
    let schoolCurrentConnections = [];
    let schoolPathZooming = false;
    let schoolPathZoomTimer = null;
    let schoolMobilePinchingPath = false;
    let schoolLabelPulseSyncTimer = null;
    let schoolLabelPulseSyncRaf = null;
    let schoolLabelPulseObserverInstalled = false;

    function schoolStrokeColor(zoneColor) {
      if (SCHOOL_STROKE_MODE === 'white') return '#ffffff';
      if (SCHOOL_STROKE_MODE === 'dark') return '#333333';
      return zoneColor;
    }

    function schoolLineColorForZone(zone) {
      if (!zone) return SCHOOL_LINE_PALETTE[0];
      return SCHOOL_LINE_PALETTE[zone.colorIdx % SCHOOL_LINE_PALETTE.length];
    }

    function schoolHexToRgbCsv(hex) {
      let h = String(hex || '').replace('#', '');
      if (h.length === 3) h = h.split('').map(c => c + c).join('');
      const r = parseInt(h.substr(0, 2), 16);
      const g = parseInt(h.substr(2, 2), 16);
      const b = parseInt(h.substr(4, 2), 16);
      return `${r},${g},${b}`;
    }

    function schoolSyncDelay(durationMs = SCHOOL_PULSE_DURATION) {
      const elapsed = (performance.now() - SCHOOL_PULSE_EPOCH) % durationMs;
      return '-' + elapsed.toFixed(0) + 'ms';
    }

    function schoolCalculateCentroid(geom) {
      let sumLat = 0, sumLng = 0, count = 0;
      const polys = geom.type === 'Polygon' ? [geom.coordinates] : geom.coordinates;
      polys.forEach(poly => {
        poly[0].forEach(pt => {
          sumLng += pt[0];
          sumLat += pt[1];
          count++;
        });
      });
      return { lat: sumLat / count, lng: sumLng / count };
    }

    function schoolExtractSchoolNames(hakgudoNm) {
      const core = String(hakgudoNm || '')
        .replace(/공동\(일방\)통학구역$/, '')
        .replace(/공동통학구역$/, '')
        .replace(/통학구역$/, '');
      const tokens = [];
      let idx = 0;
      while (idx < core.length) {
        const nextCho = core.indexOf('초', idx + 1);
        if (nextCho === -1) { tokens.push(core.slice(idx)); break; }
        let endIdx = nextCho + 1;
        const after = core.slice(nextCho + 1);
        const bunkyo = after.match(/^(.+?분교)/);
        if (bunkyo) endIdx = nextCho + 1 + bunkyo[1].length;
        tokens.push(core.slice(idx, endIdx));
        idx = endIdx;
      }
      return tokens.map(s => {
        const m = s.match(/^(.+?초)(.+분교)?$/);
        if (!m) return s + '등학교';
        const base = m[1] + '등학교';
        const branch = m[2] ? m[2] + '장' : '';
        return base + branch;
      });
    }

    function schoolDistanceMeters(lat1, lng1, lat2, lng2) {
      const R = 6371000;
      const toRad = Math.PI / 180;
      const dLat = (lat2 - lat1) * toRad;
      const dLng = (lng2 - lng1) * toRad;
      const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1 * toRad) * Math.cos(lat2 * toRad) *
        Math.sin(dLng / 2) * Math.sin(dLng / 2);
      return 2 * R * Math.asin(Math.sqrt(a));
    }

    function schoolPointInRing(lat, lng, ring) {
      let inside = false;
      for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
        const xi = ring[i][1], yi = ring[i][0];
        const xj = ring[j][1], yj = ring[j][0];
        const intersect = ((yi > lng) !== (yj > lng)) &&
          (lat < (xj - xi) * (lng - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
      }
      return inside;
    }

    function schoolIsInsideGeometry(lat, lng, geometry) {
      const polys = geometry.type === 'Polygon' ? [geometry.coordinates] : geometry.coordinates;
      return polys.some(poly => schoolPointInRing(lat, lng, poly[0]));
    }

    function schoolGeometryBounds(geometry) {
      const box = { minLat: Infinity, maxLat: -Infinity, minLng: Infinity, maxLng: -Infinity };
      const polys = geometry.type === 'Polygon' ? [geometry.coordinates] : geometry.coordinates;
      polys.forEach(poly => {
        (poly[0] || []).forEach(pt => {
          const lng = Number(pt[0]);
          const lat = Number(pt[1]);
          if (!Number.isFinite(lat) || !Number.isFinite(lng)) return;
          if (lat < box.minLat) box.minLat = lat;
          if (lat > box.maxLat) box.maxLat = lat;
          if (lng < box.minLng) box.minLng = lng;
          if (lng > box.maxLng) box.maxLng = lng;
        });
      });
      return box;
    }

    function schoolGetViewportBox(paddingRatio = SCHOOL_VIEWPORT_PADDING_RATIO) {
      const bounds = map.getBounds();
      const sw = bounds.getSouthWest();
      const ne = bounds.getNorthEast();
      const minLat = sw.getLat();
      const maxLat = ne.getLat();
      const minLng = sw.getLng();
      const maxLng = ne.getLng();
      const latPad = Math.abs(maxLat - minLat) * paddingRatio;
      const lngPad = Math.abs(maxLng - minLng) * paddingRatio;
      return {
        minLat: minLat - latPad,
        maxLat: maxLat + latPad,
        minLng: minLng - lngPad,
        maxLng: maxLng + lngPad
      };
    }

    function schoolBboxIntersects(a, b) {
      if (!a || !b) return false;
      return a.minLat <= b.maxLat && a.maxLat >= b.minLat &&
             a.minLng <= b.maxLng && a.maxLng >= b.minLng;
    }

    function schoolPointInViewport(lat, lng, box) {
      return Number.isFinite(lat) && Number.isFinite(lng) &&
             lat >= box.minLat && lat <= box.maxLat &&
             lng >= box.minLng && lng <= box.maxLng;
    }

    function updateSchoolViewportPolygons(activeZoneIds = null) {
      if (!isSchoolMode || !schoolDataReady) return;
      const viewBox = schoolGetViewportBox();
      const shouldLimitByActiveZones = activeZoneIds instanceof Set;

      schoolZones.forEach(zone => {
        const isActiveZone = !shouldLimitByActiveZones || activeZoneIds.has(zone.id);
        const visible = isActiveZone && schoolBboxIntersects(zone._bbox, viewBox);
        zone.polyObjs?.forEach(p => p.setMap(visible ? map : null));
      });
    }

    function schoolBuildPolygons() {
      schoolZones.forEach(zone => {
        const geom = zone.geometry;
        const polysCoords = geom.type === 'Polygon' ? [geom.coordinates] : geom.coordinates;
        zone.polyObjs = polysCoords.map(poly => {
          const path = poly[0].map(pt => new kakao.maps.LatLng(pt[1], pt[0]));
          return new kakao.maps.Polygon({
            path,
            strokeWeight: SCHOOL_STROKE_WEIGHT,
            strokeColor: schoolStrokeColor(zone.color),
            strokeOpacity: SCHOOL_STROKE_OPACITY,
            strokeStyle: zone.isShared ? 'dash' : 'solid',
            fillColor: zone.color,
            fillOpacity: SCHOOL_FILL_OPACITY
          });
        });
      });
    }

    function schoolMatchAptsToZones() {
      APTS.forEach(apt => {
        apt._schoolZone = null;
        for (const zone of schoolZones) {
          if (schoolIsInsideGeometry(apt.lat, apt.lng, zone.geometry)) {
            apt._schoolZone = zone;
            break;
          }
        }
      });
    }

    async function initSchoolModeData() {
      if (schoolDataReady) return true;
      if (schoolDataLoading) return schoolDataLoading;

      schoolDataLoading = Promise.all([
        fetch(SCHOOL_ZONE_JSON_URL, { cache: 'no-store' }).then(r => {
          if (!r.ok) throw new Error('school_zones_ulsan.json 로드 실패');
          return r.json();
        }),
        fetch(SCHOOL_ZONE_JSON_URL_BUSAN, { cache: 'no-store' }).then(r => {
          if (!r.ok) throw new Error('school_zones_busan.json 로드 실패');
          return r.json();
        }),
        fetch(SCHOOL_LOCATION_JSON_URL, { cache: 'no-store' }).then(r => {
          if (!r.ok) throw new Error('school_locations_all.json 로드 실패');
          return r.json();
        })
      ]).then(([zones, zonesBusan, allSchools]) => {
        const lookup = {};
        (Array.isArray(allSchools) ? allSchools : []).forEach(s => {
          lookup[s.name + '|' + s.edu] = s;
        });

        // [index_30_2] 울산 + 부산 학구도를 하나의 배열로 병합해 동일 파이프라인에 태운다.
        const featuresUlsan = Array.isArray(zones?.features) ? zones.features : [];
        const featuresBusan = Array.isArray(zonesBusan?.features) ? zonesBusan.features : [];
        const features = featuresUlsan.concat(featuresBusan);
        schoolZones = features.map((feat, idx) => {
          const hakName = feat.properties?.HAKGUDO_NM || '';
          // [index_30_2] 색 배정 키를 학구도명 → HAKGUDO_ID 로 전환.
          //   '송정초통학구역'이 울산 1곳 + 부산 2곳(해운대·북구) 총 3곳이라 이름 키는 충돌한다.
          const hakId = feat.properties?.HAKGUDO_ID || '';
          const isShared = String(feat.properties?.HAKGUDO_GB) === '1';
          const eduArea = feat.properties?.EDU_NM || '';
          const candidates = schoolExtractSchoolNames(hakName);
          const matched = candidates.map(n => lookup[n + '|' + eduArea] || null).filter(Boolean);
          const pos = matched.length > 0
            ? { lat: matched[0].lat, lng: matched[0].lng }
            : schoolCalculateCentroid(feat.geometry);
          const displayName = hakName
            .replace('공동(일방)통학구역', '')
            .replace('공동통학구역', '')
            .replace('통학구역', '');
          const colorIdx = (typeof SCHOOL_ZONE_COLOR_MAP[hakId] !== 'undefined') ? SCHOOL_ZONE_COLOR_MAP[hakId] : 0;
          return {
            id: 'school_zone_' + idx,
            hakName,
            displayName,
            lat: Number(pos.lat),
            lng: Number(pos.lng),
            isShared,
            eduArea,
            geometry: feat.geometry,
            _bbox: schoolGeometryBounds(feat.geometry),
            colorIdx,
            color: SCHOOL_PALETTE[colorIdx % SCHOOL_PALETTE.length],
            matchedSchools: matched,
            polyObjs: [],
            markerOverlay: null,
            circle: null
          };
        });

        schoolBuildPolygons();
        schoolMatchAptsToZones();
        schoolDataReady = true;
        return true;
      }).catch(err => {
        schoolDataLoading = null;
        schoolDataReady = false;
        console.error(err);
        toast('초등 학구도 데이터 로드 실패');
        return false;
      });

      return schoolDataLoading;
    }

    function showSchoolMode() {
      if (!schoolDataReady) {
        toast('초등 학구도 데이터 로드 중입니다.');
        return;
      }

      isSchoolMode = true;
      document.body.classList.add('school-label-pulse-active');

      if (!schoolDisclaimerDismissed) {
        document.getElementById('schoolDisclaimer').style.display = 'block';
      }
      document.getElementById('schoolDistList').style.display = 'flex';
      renderCombinedAptMarkersAndEffects(true);
    }

    function hideSchoolMode() {
      isSchoolMode = false;
      document.body.classList.remove('school-label-pulse-active');

      schoolZones.forEach(zone => {
        zone.polyObjs?.forEach(p => p.setMap(null));
        if (zone.markerOverlay) zone.markerOverlay.setMap(null);
        if (zone.circle) zone.circle.setMap(null);
      });

      document.getElementById('schoolDisclaimer').style.display = 'none';
      document.getElementById('schoolDistList').style.display = 'none';

      drawn.forEach(d => {
        try {
          const el = d.overlay?.getContent();
          if (el && el.classList) {
            el.classList.remove('school-nearby');
            el.style.removeProperty('--school-pulse-rgb');
            el.style.animationDelay = '';
          }
        } catch(e) {}
      });
      clearDrawn();
      schoolCurrentConnections = [];
      clearSchoolPaths();
    }

    function applySchoolDistanceEffect() {
      if (!isSchoolMode) return;
      renderCombinedAptMarkersAndEffects(true);
    }

    function getSchoolPathSvg() {
      if (!schoolPathSvg) schoolPathSvg = document.querySelector('#schoolPathOverlay svg');
      return schoolPathSvg;
    }

    function clearSchoolPaths() {
      const svg = getSchoolPathSvg();
      if (svg) svg.innerHTML = '';
    }

    function renderSchoolPaths(connections) {
      if (!isSchoolMode || schoolPathZooming) return;
      const svg = getSchoolPathSvg();
      if (!svg) return;
      svg.innerHTML = '';
      if (!connections || !connections.length) return;

      const proj = map.getProjection();
      const viewBox = schoolGetViewportBox();
      connections.forEach(c => {
        const aptVisible = schoolPointInViewport(c.aptLat, c.aptLng, viewBox);
        const schoolVisible = schoolPointInViewport(c.schLat, c.schLng, viewBox);
        if (!aptVisible && !schoolVisible) return;

        const p1 = proj.containerPointFromCoords(new kakao.maps.LatLng(c.aptLat, c.aptLng));
        const p2 = proj.containerPointFromCoords(new kakao.maps.LatLng(c.schLat, c.schLng));
        const mx = (p1.x + p2.x) / 2;
        const my = (p1.y + p2.y) / 2;
        const dx = p2.x - p1.x;
        const dy = p2.y - p1.y;
        const len = Math.sqrt(dx * dx + dy * dy);
        if (len < 1) return;
        const curve = len * 0.18;
        const cx = mx + (-dy / len) * curve;
        const cy = my + (dx / len) * curve;
        const d = `M ${p1.x} ${p1.y} Q ${cx} ${cy} ${p2.x} ${p2.y}`;

        const base = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        base.setAttribute('d', d);
        base.setAttribute('class', 'schoolPathBase');
        base.setAttribute('stroke-width', (SCHOOL_LINE_WIDTH * 0.73).toFixed(2));
        svg.appendChild(base);

        const flow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        const flowColor = typeof c.colorIdx !== 'undefined'
          ? SCHOOL_LINE_PALETTE[c.colorIdx % SCHOOL_LINE_PALETTE.length]
          : c.color;
        flow.setAttribute('d', d);
        flow.setAttribute('class', 'schoolPathFlow');
        flow.setAttribute('stroke-width', SCHOOL_LINE_WIDTH);
        flow.setAttribute('pathLength', '1');
        flow.style.setProperty('--school-line-rgb', schoolHexToRgbCsv(flowColor));
        flow.style.strokeOpacity = SCHOOL_LINE_OPACITY;
        flow.style.animationDelay = schoolSyncDelay(SCHOOL_FLOW_DURATION);
        svg.appendChild(flow);
      });
    }

    function destroySchoolPathsForZoom() {
      if (!isSchoolMode) return;
      clearTimeout(schoolPathZoomTimer);
      if (schoolPathZooming) return;
      schoolPathZooming = true;
      clearSchoolPaths();
    }

    function recreateSchoolPathsAfterZoom(delayMs = 90) {
      if (!isSchoolMode) return;
      clearTimeout(schoolPathZoomTimer);
      schoolPathZoomTimer = setTimeout(() => {
        schoolPathZooming = false;
        if (schoolCurrentConnections.length) renderSchoolPaths(schoolCurrentConnections);
      }, delayMs);
    }

    function destroySchoolPathsForMobilePinch(e) {
      if (!isSchoolMode) return;
      if (e.touches && e.touches.length >= 2) {
        schoolMobilePinchingPath = true;
        destroySchoolPathsForZoom();
      }
    }

    function finishSchoolPathsForMobilePinch(e) {
      if (!schoolMobilePinchingPath) return;
      if (e.touches && e.touches.length > 0) return;
      schoolMobilePinchingPath = false;
      if (schoolPathZooming) recreateSchoolPathsAfterZoom(180);
    }

    function syncSchoolLabelPulseNow() {
      if (!isSchoolMode) return;
      const delay = schoolSyncDelay(SCHOOL_PULSE_DURATION);
      drawn.forEach(d => {
        const el = d.overlay?.getContent();
        if (!el || !el.classList || !el.classList.contains('school-nearby')) return;
        el.style.animationDelay = delay;
      });
    }

    function scheduleSchoolLabelPulseSync(waitMs) {
      if (!isSchoolMode) return;
      clearTimeout(schoolLabelPulseSyncTimer);
      if (waitMs && waitMs > 0) {
        schoolLabelPulseSyncTimer = setTimeout(() => scheduleSchoolLabelPulseSync(0), waitMs);
        return;
      }
      if (schoolLabelPulseSyncRaf) return;
      schoolLabelPulseSyncRaf = requestAnimationFrame(() => {
        schoolLabelPulseSyncRaf = null;
        syncSchoolLabelPulseNow();
      });
    }

    function installSchoolLabelPulseObserver() {
      if (schoolLabelPulseObserverInstalled) return;
      schoolLabelPulseObserverInstalled = true;
      const observer = new MutationObserver(mutations => {
        if (!isSchoolMode) return;
        for (const mutation of mutations) {
          for (const node of mutation.addedNodes) {
            if (!node || node.nodeType !== 1) continue;
            const hasTarget = (node.classList && node.classList.contains('school-nearby')) ||
              (node.querySelector && node.querySelector('.aptLabel.school-nearby'));
            if (hasTarget) {
              scheduleSchoolLabelPulseSync(0);
              return;
            }
          }
        }
      });
      observer.observe(mapContainer, { childList: true, subtree: true });
    }

    function resetSchoolDistButtons() {
      // [index_20] 디폴트를 '전체'로 두지 않는다 → 아무것도 선택 안 된 상태로 초기화.
      schoolDist = null;
      document.querySelectorAll('.schoolDistBtn').forEach(b => b.classList.remove('selected'));
    }

    document.querySelectorAll('.schoolDistBtn').forEach(btn => {
      btn.addEventListener('click', () => {
        // [index_20_1] 이미 선택된 버튼을 다시 누르면 해제 → 미선택(null)=전체로 복귀
        if (btn.classList.contains('selected')) {
          btn.classList.remove('selected');
          schoolDist = null;
          syncFeatureButtonStates();
          if (isSchoolMode) applySchoolDistanceEffect(); // 미선택=전체 → 전체 아파트 + 학구도/통학로
          return;
        }
        schoolDist = Number(btn.dataset.dist);
        document.querySelectorAll('.schoolDistBtn').forEach(b => b.classList.remove('selected'));
        btn.classList.add('selected');
        syncFeatureButtonStates();
        if (isSchoolMode) applySchoolDistanceEffect();
      });
    });

    const schoolDisclaimer = document.getElementById('schoolDisclaimer');
    const schoolDisclaimerClose = document.getElementById('schoolDisclaimerClose');
    if (schoolDisclaimerClose) {
      schoolDisclaimerClose.addEventListener('click', e => {
        e.stopPropagation();
        schoolDisclaimerDismissed = true;
        schoolDisclaimer.style.display = 'none';
      });
    }

    mapContainer.addEventListener('wheel', destroySchoolPathsForZoom, { passive: true });
    mapContainer.addEventListener('touchstart', destroySchoolPathsForMobilePinch, { passive: true, capture: true });
    mapContainer.addEventListener('touchmove', destroySchoolPathsForMobilePinch, { passive: true, capture: true });
    mapContainer.addEventListener('touchend', finishSchoolPathsForMobilePinch, { passive: true, capture: true });
    mapContainer.addEventListener('touchcancel', finishSchoolPathsForMobilePinch, { passive: true, capture: true });

    kakao.maps.event.addListener(map, 'zoom_start', destroySchoolPathsForZoom);
    kakao.maps.event.addListener(map, 'zoom_changed', destroySchoolPathsForZoom);
    kakao.maps.event.addListener(map, 'center_changed', () => {
      if (!isSchoolMode) return;
      scheduleSchoolLabelPulseSync(0);
      clearSchoolPaths();
    });
    kakao.maps.event.addListener(map, 'idle', () => {
      if (isDaejangMode) daejangEnsureViewportRegions(true);
      if (isStationMode) refreshMetroViewportRendering();
      else if (!isSchoolMode && !isTransactionMode && !hasAnyCombinedFilter()) {
        // [index_20_1] 베이스(무필터) 상태: 화면 이동/줌 시 현재 화면 기준으로 전체 아파트 재표시
        drawBaseViewportApts();
      }

      if (!isSchoolMode) return;
      scheduleSchoolLabelPulseSync(0);
      updateSchoolViewportPolygons(getDrawnSchoolZoneIdSet());
      if (schoolPathZooming) {
        if (schoolMobilePinchingPath) return;
        recreateSchoolPathsAfterZoom();
        return;
      }
      if (schoolCurrentConnections.length) renderSchoolPaths(schoolCurrentConnections);
    });

    kakao.maps.event.addListener(map, 'dragstart', () => {
      if (isSchoolMode) clearSchoolPaths();
    });

    installSchoolLabelPulseObserver();

    document.querySelectorAll('#sideFilters .filterBtn').forEach(btn => {
      btn.addEventListener('click', () => {
        if(isTransactionMode) toggleTransactionMode(false);
        closeDaejangScopeList();
        if(isDaejangMode) toggleDaejangMode(false);   // [27_1] 사이드 필터 진입 시 대장 해제
        else daejangSyncButtons();                    // [27_6] 메뉴만 펼친 상태도 닫힘 표시 반영
        const p = btn.dataset.panel;
        if(p !== 'brand' && p !== 'stations' && p !== 'school' && p !== 'big' && p !== 'new'){
          toast("기능 준비 중입니다.");
          return;
        }

        const prevPanel = activePanel;
        const wasOpen = (activePanel === p);

        // [index_20] 다른 버튼을 눌러 패널이 바뀔 때, 아직 아무것도 선택 안 한(미선택) 기능은 꺼준다.
        //  (전체/거리가 선택되어 적용된 기능은 그대로 유지된다.)
        if (!wasOpen && prevPanel) {
          closePreviewPanelWithoutAppliedFilter(prevPanel);
        }

        if (p === 'brand') {
          activePanel = wasOpen ? null : 'brand';
          updateFilterPanelVisibility();
          renderCombinedAptMarkersAndEffects();
          return;
        }

        if (p === 'station') {
          if (!isStationMode) {
            // [index_20_1] 1번 클릭: 기능 ON + 패널 열림. 상세는 미선택(null)이지만
            //   미선택=전체 취급이므로 전체 아파트 + 역세권 시각요소가 표시된다.
            isStationMode = true;
            activePanel = 'station';
            metroRadius = null;
            metroCurrentIsAll = true;
            metroCurrentEffectiveRadius = null;
            document.querySelectorAll('.stationDistBtn').forEach(b => b.classList.remove('selected'));
            if (!disclaimerDismissed) stationDisclaimer.style.display = 'block';
            updateFilterPanelVisibility();
            showMetroStations(); // 미선택=전체 → 역 마커/폴리곤 + 전체 아파트 표시
          } else if (wasOpen) {
            // [index_20_1] 2번 클릭: 패널만 닫는다 (기능·불·효과 유지).
            activePanel = null;
            stationDisclaimer.style.display = 'none';
            updateFilterPanelVisibility();
          } else {
            // [index_20_1] 3번 클릭(패널 닫힌 상태):
            //   - 상세 미선택(null)이면 기능 완전 해제(OFF)
            //   - 상세가 선택돼 있으면 기능 유지한 채 패널을 다시 연다
            if (metroRadius === null) {
              clearMetroOverlays();
              isStationMode = false;
              metroCurrentCandidateApts = [];
              metroCurrentCandidateAptKeySet = new Set();
              metroCurrentCandidatePolygons = [];
              metroCurrentIsAll = true;
              metroCurrentEffectiveRadius = null;
              stationDisclaimer.style.display = 'none';
              activePanel = null;
              updateFilterPanelVisibility();
              renderCombinedAptMarkersAndEffects();
            } else {
              activePanel = 'station';
              if (!disclaimerDismissed) stationDisclaimer.style.display = 'block';
              updateFilterPanelVisibility();
            }
          }
          return;
        }

        if (p === 'school') {
          if (!isSchoolMode) {
            // [index_20_1] 1번 클릭: 기능 ON + 패널 열림. 미선택=전체 취급 →
            //   전체 아파트 + 학구도 + 통학로 표시.
            resetSchoolDistButtons();
            activePanel = 'school';
            updateFilterPanelVisibility();
            showSchoolMode();
          } else if (wasOpen) {
            // [index_20_1] 2번 클릭: 패널만 닫는다 (기능·불·효과 유지).
            activePanel = null;
            updateFilterPanelVisibility();
          } else {
            // [index_20_1] 3번 클릭(패널 닫힌 상태):
            //   - 상세 미선택(null)이면 기능 완전 해제(OFF)
            //   - 상세가 선택돼 있으면 기능 유지한 채 패널을 다시 연다
            if (schoolDist === null) {
              hideSchoolMode();
              activePanel = null;
              updateFilterPanelVisibility();
              renderCombinedAptMarkersAndEffects();
            } else {
              activePanel = 'school';
              updateFilterPanelVisibility();
            }
          }
          return;
        }

        // [26_10] 대단지: 역세권/초등과 동일 3단계 사이클. 지도 시각효과는 없고 라벨 교집합만 좁힘.
        if (p === 'big') {
          if (!isBigMode) {
            // 1번 클릭: 기능 ON + 패널 열림. 미선택(null)=전체 통과.
            document.querySelectorAll('.bigSdsBtn').forEach(b => b.classList.remove('selected'));
            bigSds = null;
            isBigMode = true;
            activePanel = 'big';
            updateFilterPanelVisibility();
            renderCombinedAptMarkersAndEffects();
          } else if (wasOpen) {
            // 2번 클릭: 패널만 닫음 (기능·필터 유지).
            activePanel = null;
            updateFilterPanelVisibility();
          } else {
            // 3번 클릭(패널 닫힘): 미선택이면 OFF, 선택돼 있으면 패널 재오픈.
            if (bigSds === null) {
              isBigMode = false;
              activePanel = null;
              updateFilterPanelVisibility();
              renderCombinedAptMarkersAndEffects();
            } else {
              activePanel = 'big';
              updateFilterPanelVisibility();
            }
          }
          return;
        }

        // [26_10] 신축: 대단지와 동일 구조.
        if (p === 'new') {
          if (!isNewMode) {
            document.querySelectorAll('.newAgeBtn').forEach(b => b.classList.remove('selected'));
            newAge = null;
            isNewMode = true;
            activePanel = 'new';
            updateFilterPanelVisibility();
            renderCombinedAptMarkersAndEffects();
          } else if (wasOpen) {
            activePanel = null;
            updateFilterPanelVisibility();
          } else {
            if (newAge === null) {
              isNewMode = false;
              activePanel = null;
              updateFilterPanelVisibility();
              renderCombinedAptMarkersAndEffects();
            } else {
              activePanel = 'new';
              updateFilterPanelVisibility();
            }
          }
          return;
        }
      });
    });

    document.querySelectorAll('.stationDistBtn').forEach(btn => {
      btn.addEventListener('click', () => {
        // [index_20_1] 이미 선택된 버튼을 다시 누르면 해제 → 미선택(null)=전체로 복귀
        if (btn.classList.contains('selected')) {
          btn.classList.remove('selected');
          metroRadius = null;
          metroCurrentIsAll = true;
          metroCurrentEffectiveRadius = null;
          syncFeatureButtonStates();
          if (isStationMode) showMetroStations(); // 미선택=전체 → 전체 아파트 + 역 마커/폴리곤
          return;
        }
        const rawDist = btn.dataset.dist;
        const dist = (rawDist === 'all') ? 'all' : Number(rawDist);
        if (dist !== 'all' && (!Number.isFinite(dist) || dist <= 0)) return;
        metroRadius = dist;
        document.querySelectorAll('.stationDistBtn').forEach(b => b.classList.remove('selected'));
        btn.classList.add('selected');
        syncFeatureButtonStates();
        // 반경 변경 시 다시 그리기
        if (isStationMode) showMetroStations();
      });
    });

    // [26_10] 대단지 세대수 버튼: 단일 선택. 선택된 버튼 재클릭 → 해제(미선택=전체 통과).
    document.querySelectorAll('.bigSdsBtn').forEach(btn => {
      btn.addEventListener('click', () => {
        if (btn.classList.contains('selected')) {
          btn.classList.remove('selected');
          bigSds = null;
          syncFeatureButtonStates();
          if (isBigMode) renderCombinedAptMarkersAndEffects();
          return;
        }
        bigSds = Number(btn.dataset.sds);
        document.querySelectorAll('.bigSdsBtn').forEach(b => b.classList.remove('selected'));
        btn.classList.add('selected');
        syncFeatureButtonStates();
        if (isBigMode) renderCombinedAptMarkersAndEffects();
      });
    });

    // [26_10] 신축 경과년수 버튼: 단일 선택. 선택된 버튼 재클릭 → 해제(미선택=전체 통과).
    document.querySelectorAll('.newAgeBtn').forEach(btn => {
      btn.addEventListener('click', () => {
        if (btn.classList.contains('selected')) {
          btn.classList.remove('selected');
          newAge = null;
          syncFeatureButtonStates();
          if (isNewMode) renderCombinedAptMarkersAndEffects();
          return;
        }
        newAge = Number(btn.dataset.age);
        document.querySelectorAll('.newAgeBtn').forEach(b => b.classList.remove('selected'));
        btn.classList.add('selected');
        syncFeatureButtonStates();
        if (isNewMode) renderCombinedAptMarkersAndEffects();
      });
    });

    // [v14_9] 페이지 로드 시 각 .brandBtn에 고유 색상 CSS 변수 주입
    document.querySelectorAll('.brandBtn').forEach(btn => {
      const label = btn.dataset.brand;
      const color = BRAND_COLORS[label];
      if (color) {
        btn.style.setProperty('--brand-color', color);
        btn.style.setProperty('--brand-text-color', getContrastColor(color));
      }
    });

    document.querySelectorAll('.brandBtn').forEach(btn => {
      btn.addEventListener('click', () => {
        const b = btn.dataset.brand;
        const label = (b === "e편한세상") ? "e편한세상" : b;
        if(selectedBrands.has(label)) selectedBrands.delete(label);
        else selectedBrands.add(label);
        btn.classList.toggle('selected', selectedBrands.has(label));
        syncFeatureButtonStates();
        applyBrandFilter();
      });
    });

    btnTransaction.addEventListener('click', () => {
        closeDaejangScopeList();
        if (!isDaejangMode) daejangSyncButtons();
        toggleTransactionMode(!isTransactionMode);
    });

    cancelOnlyToggle.addEventListener('change', () => {
        showCancelledOnly = cancelOnlyToggle.checked;
        loadCurrentRangeData();
    });

    // [index_24] 지역 토글: 울산(기본) ↔ 부산. 전환 시 해당 지역 거래로 재조회
    const txRegionSwitch = document.getElementById('txRegionSwitch');
    if (txRegionSwitch && TX_PANEL_UI !== 'v08') {   // [30_5] v08 에서는 '시' 칩이 대신한다 (스위치는 CSS로 숨김)
        txRegionSwitch.addEventListener('click', () => {
            const toBusan = !txRegionSwitch.classList.contains('on');
            txRegionSwitch.classList.toggle('on', toBusan);
            txRegion = toBusan ? 'busan' : 'ulsan';
            loadCurrentRangeData();
        });
    }

    const tpMinimizeBtn = document.getElementById('tpMinimizeBtn');
    const tpRestoreBtn = document.getElementById('tpRestoreBtn');

    tpMinimizeBtn.addEventListener('click', () => {
        transactionPanel.classList.add('minimized');
        tpMinimizeBtn.classList.remove('visible');
        tpRestoreBtn.classList.add('visible');
    });

    tpRestoreBtn.addEventListener('click', () => {
        transactionPanel.classList.remove('minimized');
        tpRestoreBtn.classList.remove('visible');
        tpMinimizeBtn.classList.add('visible');
    });

    btnCloseDongArea.addEventListener('click', () => {
        closeDongAreaPanel();
    });

    // [index_26_6] 모바일/브라우저 '뒤로가기': 상세 패널이 열려 있으면 페이지를 이탈하지 않고 패널만 닫는다.
    //   (뒤로가기로 진입했으므로 fromPopstate=true → closeDongAreaPanel 내부에서 history.back() 재호출하지 않음)
    window.addEventListener('popstate', () => {
        if (dongAreaPanel.classList.contains('open')) {
            closeDongAreaPanel(true);
        }
    });

    // [index_24_1] dongAreaAptSelect change 리스너 제거 — 드롭다운 은퇴

    window.addEventListener('resize', () => {
        setDongAreaPanelWidth(currentDongAreaWidth);
        updateLeftUiPosition();
    });

    function toggleTransactionMode(turnOn) {
        isTransactionMode = turnOn;
        syncMiniTrendWithFilter(); // [index_20_5] 거래량 모드 진입/해제도 '필터'로 간주해 미니 트렌드 자동 전환
        const btn = btnTransaction;
        const isMobile = window.innerWidth <= 768;

        tpRestoreBtn.classList.remove('visible');
        tpMinimizeBtn.classList.remove('visible');

        if (turnOn) {
            if (isDaejangMode) toggleDaejangMode(false);   // [27_1] 거래량과 대장은 상호배타
            document.querySelectorAll('#sideFilters .filterBtn').forEach(b => b.classList.remove('active'));
            activePanel = null;
            brandList.style.display = 'none';
            stationList.style.display = 'none';
            document.getElementById('schoolDistList').style.display = 'none';
            document.getElementById('bigList').style.display = 'none';   // [26_10] 거래량 진입 시 패널 숨김(필터 상태는 유지)
            document.getElementById('newList').style.display = 'none';   // [26_10]
            if (isStationMode) { clearMetroOverlays(); clearDrawn(); isStationMode = false; stationDisclaimer.style.display = 'none'; }
            if (isSchoolMode) { hideSchoolMode(); }
            syncFeatureButtonStates();
            btn.classList.add('active');
            transactionPanel.classList.add('open');
            transactionPanel.classList.remove('minimized');

            if (isMobile) {
                tpMinimizeBtn.classList.add('visible');
            }

            if (!isMobile) {
                rightFilters.style.right = '410px'; 
            }
            setDongAreaPanelWidth(currentDongAreaWidth);
            // [30_5] 카드 수백 장 렌더가 같은 태스크에서 돌면 여는 슬라이드가 멈췄다 튄다.
            //   두 프레임 양보해 시트가 먼저 올라오기 시작한 뒤 목록을 그린다(지연 약 32ms).
            if (TX_PANEL_UI === 'v08') requestAnimationFrame(() => requestAnimationFrame(() => loadCurrentRangeData()));
            else loadCurrentRangeData();
        } else {
            btn.classList.remove('active');
            transactionPanel.classList.remove('open');
            transactionPanel.classList.remove('minimized');

            if (!isMobile) {
                rightFilters.style.right = '10px';
            }
            setDongAreaPanelWidth(currentDongAreaWidth);
            // [index_20_1] 거래량 모드 종료 시 빈 화면 대신 베이스(전체 아파트) 상태로 복귀
            renderCombinedAptMarkersAndEffects();
            syncFeatureButtonStates();
        }
    }

    // 종합 차트 연동: 거래량 슬라이더 변경 시 하이라이트 업데이트
    const _origLoadCurrentRangeData = loadCurrentRangeData;
    loadCurrentRangeData = async function() {
      await _origLoadCurrentRangeData();
      updateSummaryHighlight();
    };

    // 종합 차트 연동: 거래량 모드 토글 시 테이블 표시/숨김
    const _origToggleTransactionMode = toggleTransactionMode;
    toggleTransactionMode = function(turnOn) {
      _origToggleTransactionMode(turnOn);
      updateSummaryHighlight();
    };


    /* ═══════════════════════════════════════════════════════════════════════════
       [index_27_1] 대장(구/동) 기능
       ---------------------------------------------------------------------------
       판정: '연최고' 단일 기준 — 각 (구 또는 동) × 평형밴드에서 그 해 최고 실거래
             단지가 그 해 대장. 연속 동일 대장은 하나의 재위(N대)로 병합.
       데이터: 기존 월별 매매 파일(../data/apt, ../data/busan/apt)을 런타임 집계.
             받는 즉시 (스코프|키|밴드|연도) 최고가 1건만 남기고 원본은 버림.
       ★ frozen 전환 지점: daejangLoadRegion() 하나만 사전집계 JSON fetch로 교체.
       좌표: APTS(apt_coor.json)에서 조회. 현재 대장 좌표 없으면 그 구/동 생략,
             과거 대장만 없으면 지도 정류장·계보선만 생략(팝업 목록엔 유지).
       ═══════════════════════════════════════════════════════════════════════════ */

    const DAEJANG_START_YEAR = 2016;   // 계보 시작 연도  ← 조정 손잡이
    const DAEJANG_FAR_LEVEL  = 10;     // 이 레벨 이상이면 원경(은왕관·계보선·필 숨김)
    const DAEJANG_CHUNK      = 8;      // 월별 파일 동시 fetch 수
    const DAEJANG_DEFAULT_SIZE = '59'; // [27_3] 기본 평형

    // 왕관 색 = 현재 대장의 최고가 티어 (지역 구분 색과는 별개 축)
    const DJ_TIERS = [
      { min: 100000, c: '#f5b301', d: '#c98e00' },   // 10억 이상
      { min:  70000, c: '#7c5cd6', d: '#5f41b5' },   // 7~10억
      { min:  50000, c: '#2f7fe0', d: '#1e5fb4' },   // 5~7억
      { min:  30000, c: '#16b3a2', d: '#0d8d80' },   // 3~5억
      { min:      0, c: '#8496a8', d: '#64798c' }    // 3억 미만
    ];
    const DJ_SILVER = { c: '#c3ced8', d: '#7d90a0' };            // 과거 대장(은왕관)
    // [27_2] 계보선/지역 구분 색 = 브역대신평초 팔레트(SUMMARY_GROUP_PALETTE: 민트·피치·핑크·라벤더·
    //   페리윙클·그린·실버·레드·탄) 파생. 은왕관(실버)과 혼동되는 #C0C0C0만 제외한 8색.
    const DJ_PAL = SUMMARY_GROUP_PALETTE.filter(c => c !== '#C0C0C0');

    let isDaejangMode = false;
    let daejangScope = null;            // 'gu' | 'dong' | null
    let daejangSize = DAEJANG_DEFAULT_SIZE;   // '59' | '84'
    let daejangYearBest = {};           // region → { '스코프|키|밴드|연도': {amt, apt, ym, floor, by, sgg, umd} }
    let daejangAggCache = {};           // 'region|scope|size' → [group...]
    let daejangLoadedRegions = new Set();
    let daejangLoading = false;
    let daejangOverlays = [];           // 왕관/은왕관 CustomOverlay
    let daejangLines = [];              // 계보선 AbstractOverlay(SVG 곡선)
    let daejangPopupOv = null;          // 계보 팝업 CustomOverlay
    let daejangColorMap = {};           // 'scope|키' → 색
    let daejangCoordIndex = null;       // 좌표 조회 인덱스 (APTS 기반)
    let daejangPrevMiniTrend = null;    // [27_2] 대장 진입 전 miniTrendOn 값 (해제 시 복원)

    /* ── 표시 유틸 ── */
    function djFmtEok(man) {
      const eok = Math.floor(man / 10000), r = man % 10000;
      if (eok && r) return eok + '억 ' + r.toLocaleString();
      if (eok) return eok + '억';
      return man.toLocaleString() + '만';
    }
    function djFmtShort(man) {
      let s = (man / 10000).toFixed(1);
      if (s.slice(-2) === '.0') s = s.slice(0, -2);
      return s + '억';
    }
    function djShortYr(y) { return String(y).slice(2); }
    function djPeriod(r) {
      return (r.y0 === r.y1) ? djShortYr(r.y0) : djShortYr(r.y0) + '~' + djShortYr(r.y1);
    }
    function djCurOf(g) { return g.rs[g.rs.length - 1]; }
    // 그 단지가 대장이던 연도 나열 (재등극이면 "16 · 18 · 21 · 22") — 툴팁/문장용
    function djVisits(g, nm) {
      return djVisitList(g, nm).join(' · ');
    }
    // 지도에 찍을 정류장(좌표 보유 단지, 등장 순 1회씩)
    function djStations(g) {
      if (g._st) return g._st;
      const seen = new Set(), out = [];
      for (const r of g.rs) {
        if (r.lat == null || seen.has(r.nm)) continue;
        seen.add(r.nm);
        out.push(r);
      }
      g._st = out;
      return out;
    }
    function djTierOf(amt) {
      for (const t of DJ_TIERS) { if (amt >= t.min) return t; }
      return DJ_TIERS[DJ_TIERS.length - 1];
    }
    function djColorOf(g) { return daejangColorMap[g.scope + '|' + g.key] || DJ_PAL[0]; }
    function daejangGroupTitle(g) {
      const gu = sggCdToGu(g.sgg);
      const city = isBusanSgg(g.sgg) ? '부산' : '울산';
      return (g.scope === 'gu') ? (city + ' ' + gu) : (gu + ' ' + g.umd);
    }
    // [27_3] 왕관 배지 윗칸용 짧은 지역명 (동대장=동, 구대장=구)
    //   울주군·기장군 등은 umdNm이 "범서읍 구영리"처럼 7자까지 나오므로 마지막 토큰만 쓴다
    //   ("구영리"). 전체 이름은 팝업 제목·툴팁에 그대로 남는다.
    function daejangShortTitle(g) {
      if (g.scope === 'gu') return sggCdToGu(g.sgg);
      const u = String(g.umd || '').trim();
      if (!u) return sggCdToGu(g.sgg);
      const parts = u.split(/\s+/);
      return parts[parts.length - 1];
    }
    // [27_6] 그 단지가 대장이던 연도를 각각 반환 (16~18 → 16, 17, 18 원형 칩)
    function djVisitList(g, nm) {
      const out = [];
      for (const r of g.rs) {
        if (r.nm !== nm) continue;
        for (let y = r.y0; y <= r.y1; y++) out.push(djShortYr(y));
      }
      return out;
    }

    let djUidSeq = 0;
    function djCrownSVG(tier, badgeTxt, w, h) {
      const gid = 'djg-' + (++djUidSeq);
      return '<svg class="dj-crown" width="' + w + '" height="' + h + '" viewBox="0 0 64 56" xmlns="http://www.w3.org/2000/svg">'
        + '<defs><linearGradient id="' + gid + '" x1="0" y1="0" x2="0" y2="1">'
        + '<stop offset="0" stop-color="' + tier.c + '"/><stop offset="1" stop-color="' + tier.d + '"/></linearGradient></defs>'
        + '<path d="M7 40 L7 21 L19.5 30 L32 11 L44.5 30 L57 21 L57 40 Z" fill="url(#' + gid + ')" stroke="#fff" stroke-width="2.4" stroke-linejoin="round"/>'
        + '<circle cx="7" cy="21" r="3.4" fill="#fff" stroke="' + tier.d + '" stroke-width="1.4"/>'
        + '<circle cx="32" cy="11" r="3.8" fill="#fff" stroke="' + tier.d + '" stroke-width="1.4"/>'
        + '<circle cx="57" cy="21" r="3.4" fill="#fff" stroke="' + tier.d + '" stroke-width="1.4"/>'
        + '<rect x="7" y="40" width="50" height="10.5" rx="3.5" fill="' + tier.d + '" stroke="#fff" stroke-width="2.4"/>'
        + (badgeTxt ? '<text x="32" y="48.6" text-anchor="middle" font-family="Pretendard Variable,Pretendard,sans-serif" font-size="10" font-weight="800" fill="#fff">' + badgeTxt + '</text>' : '')
        + '</svg>';
    }

    /* [27_10] 정적 왕관(djCrownSVG2)은 순회 왕관 애니메이션으로 대체되어 제거됨.
       지역명은 우상단 배지(.dj-region-badge), 왕관은 attachCrownsToLabel의 rim+dj-run이 담당. */

    /* ── 계보선 AbstractOverlay ──
       [27_12] 지도 좌표를 점열 Polyline으로 분절하지 않는다.
       AbstractOverlay.draw()가 호출될 때 Kakao projection의 pointFromCoords()로 양 끝점을
       같은 overlayLayer 화면 좌표로 바꾼 뒤, SVG의 실제 2차 곡선(Q path)을 한 번에 그린다. */
    let djCurveUidSeq = 0;

    function djQuadPoint(p0, p1, p2, t) {
      const u = 1 - t;
      return {
        x: u * u * p0.x + 2 * u * t * p1.x + t * t * p2.x,
        y: u * u * p0.y + 2 * u * t * p1.y + t * t * p2.y
      };
    }

    // 원래 2차 곡선의 t0~t1 구간을 동일한 2차 곡선으로 정확히 잘라낸다.
    function djQuadSubcurve(p0, p1, p2, t0, t1) {
      const q0 = djQuadPoint(p0, p1, p2, t0);
      const q2 = djQuadPoint(p0, p1, p2, t1);
      const dx0 = 2 * ((1 - t0) * (p1.x - p0.x) + t0 * (p2.x - p1.x));
      const dy0 = 2 * ((1 - t0) * (p1.y - p0.y) + t0 * (p2.y - p1.y));
      const dt = t1 - t0;
      return {
        p0: q0,
        p1: { x: q0.x + dx0 * dt / 2, y: q0.y + dy0 * dt / 2 },
        p2: q2
      };
    }

    // 렌더링 분절이 아니라, 곡선의 실제 화면상 호 길이만 계산하는 LUT.
    function djQuadArcLut(p0, p1, p2, steps) {
      const n = Math.max(8, Number(steps) || 48);
      const lut = [{ t: 0, len: 0 }];
      let prev = p0;
      let total = 0;
      for (let i = 1; i <= n; i++) {
        const t = i / n;
        const p = djQuadPoint(p0, p1, p2, t);
        total += Math.hypot(p.x - prev.x, p.y - prev.y);
        lut.push({ t, len: total });
        prev = p;
      }
      return { lut, total };
    }

    function djQuadTAtLength(arc, targetLen) {
      const lut = arc && arc.lut;
      const total = arc && Number(arc.total);
      if (!lut || lut.length < 2 || !Number.isFinite(total) || total <= 0) return 0;
      const target = Math.max(0, Math.min(total, Number(targetLen) || 0));
      if (target <= 0) return 0;
      if (target >= total) return 1;
      let lo = 1, hi = lut.length - 1;
      while (lo < hi) {
        const mid = (lo + hi) >> 1;
        if (lut[mid].len < target) lo = mid + 1;
        else hi = mid;
      }
      const b = lut[lo], a = lut[lo - 1];
      const span = b.len - a.len;
      const ratio = span > 0 ? (target - a.len) / span : 0;
      return a.t + (b.t - a.t) * ratio;
    }

    function DaejangCurveOverlay(a, b, color, isLoop) {
      this.a = new kakao.maps.LatLng(a.lat, a.lng);
      this.b = new kakao.maps.LatLng(b.lat, b.lng);
      this.color = color;
      this.isLoop = !!isLoop;
      this.markerId = 'dj-arrow-' + (++djCurveUidSeq);

      const node = this.node = document.createElement('div');
      node.className = 'dj-curve-overlay';
      node.style.cssText = 'position:absolute;pointer-events:none;z-index:20;overflow:visible;';

      const svgNS = 'http://www.w3.org/2000/svg';
      const svg = this.svg = document.createElementNS(svgNS, 'svg');
      svg.setAttribute('aria-hidden', 'true');
      svg.style.cssText = 'position:absolute;left:0;top:0;overflow:visible;pointer-events:none;';

      const defs = document.createElementNS(svgNS, 'defs');
      const marker = document.createElementNS(svgNS, 'marker');
      marker.setAttribute('id', this.markerId);
      marker.setAttribute('markerWidth', '10');
      marker.setAttribute('markerHeight', '10');
      marker.setAttribute('refX', '8.5');
      marker.setAttribute('refY', '5');
      marker.setAttribute('orient', 'auto');
      marker.setAttribute('markerUnits', 'userSpaceOnUse');
      marker.setAttribute('viewBox', '0 0 10 10');
      const arrow = document.createElementNS(svgNS, 'path');
      arrow.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
      arrow.setAttribute('fill', color);
      marker.appendChild(arrow);
      defs.appendChild(marker);
      svg.appendChild(defs);

      const path = this.path = document.createElementNS(svgNS, 'path');
      path.setAttribute('fill', 'none');
      path.setAttribute('stroke', color);
      path.setAttribute('stroke-width', isLoop ? '2.6' : '2.2');
      path.setAttribute('stroke-opacity', isLoop ? '0.95' : '0.9');
      path.setAttribute('stroke-linecap', 'round');
      path.setAttribute('stroke-linejoin', 'round');
      path.setAttribute('vector-effect', 'non-scaling-stroke');
      path.setAttribute('marker-end', 'url(#' + this.markerId + ')');
      svg.appendChild(path);
      node.appendChild(svg);
    }
    DaejangCurveOverlay.prototype = new kakao.maps.AbstractOverlay();

    DaejangCurveOverlay.prototype.onAdd = function() {
      this.getPanels().overlayLayer.appendChild(this.node);
    };

    DaejangCurveOverlay.prototype.onRemove = function() {
      if (this.node && this.node.parentNode) this.node.parentNode.removeChild(this.node);
    };

    DaejangCurveOverlay.prototype.draw = function() {
      const projection = this.getProjection();
      if (!projection) return;

      // overlayLayer와 같은 좌표계. 지도 이동·줌 때 AbstractOverlay가 draw()를 다시 호출한다.
      const a = projection.pointFromCoords(this.a);
      const b = projection.pointFromCoords(this.b);
      const dx = b.x - a.x, dy = b.y - a.y;
      const len = Math.sqrt(dx * dx + dy * dy);
      if (!Number.isFinite(len) || len < 2) {
        this.node.style.display = 'none';
        return;
      }
      this.node.style.display = 'block';

      const nx = -dy / len, ny = dx / len;  // 진행방향 오른쪽(화면 좌표 y↓ 기준)
      // 단방향은 완만하게, 왕복은 서로 갈라지되 축소 시 과도한 갈고리가 생기지 않게 한다.
      const curvature = this.isLoop ? 0.20 : 0.10;
      const bendMin = this.isLoop ? 12 : 8;
      const bendMax = this.isLoop ? 100 : 68;
      // 두 점이 화면에서 가까우면 고정 최소값도 거리와 함께 줄인다.
      const adaptiveMin = Math.min(bendMin, len * (this.isLoop ? 0.30 : 0.20));
      const bend = Math.min(bendMax, Math.max(adaptiveMin, len * curvature));
      const ctrl = {
        x: (a.x + b.x) / 2 + nx * bend,
        y: (a.y + b.y) / 2 + ny * bend
      };

      // 직선거리 비율이 아니라 실제 2차 곡선의 화면상 호 길이를 기준으로 양끝을 자른다.
      const arc = djQuadArcLut(a, ctrl, b, 48);
      if (!Number.isFinite(arc.total) || arc.total < 2) {
        this.node.style.display = 'none';
        return;
      }
      const startPx = Math.min(16, arc.total * 0.10);
      const endPx = Math.min(26, arc.total * 0.14);
      const t0 = djQuadTAtLength(arc, startPx);
      const t1 = djQuadTAtLength(arc, arc.total - endPx);
      const q = djQuadSubcurve(a, ctrl, b, t0, Math.max(t0 + 0.01, t1));

      // 2차 곡선은 세 제어점의 convex hull 안에 있으므로 이 범위로 SVG를 잡으면 잘리지 않는다.
      const pad = 20;
      const minX = Math.min(q.p0.x, q.p1.x, q.p2.x) - pad;
      const minY = Math.min(q.p0.y, q.p1.y, q.p2.y) - pad;
      const maxX = Math.max(q.p0.x, q.p1.x, q.p2.x) + pad;
      const maxY = Math.max(q.p0.y, q.p1.y, q.p2.y) + pad;
      const width = Math.max(1, maxX - minX);
      const height = Math.max(1, maxY - minY);

      this.node.style.left = minX + 'px';
      this.node.style.top = minY + 'px';
      this.node.style.width = width + 'px';
      this.node.style.height = height + 'px';
      this.svg.setAttribute('width', width);
      this.svg.setAttribute('height', height);
      this.svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height);

      const x0 = q.p0.x - minX, y0 = q.p0.y - minY;
      const x1 = q.p1.x - minX, y1 = q.p1.y - minY;
      const x2 = q.p2.x - minX, y2 = q.p2.y - minY;
      this.path.setAttribute('d',
        'M ' + x0.toFixed(2) + ' ' + y0.toFixed(2)
        + ' Q ' + x1.toFixed(2) + ' ' + y1.toFixed(2)
        + ' ' + x2.toFixed(2) + ' ' + y2.toFixed(2));
    };

    /* ── 좌표 조회 (APTS 기반, 별도 좌표 파일 없음) ── */
    function daejangBuildCoordIndex() {
      daejangCoordIndex = new Map();
      for (const a of APTS) {
        if (a.lat == null || a.lng == null) continue;
        const n = normalizeName(a.aptNm);
        const sg = (a.sggCd == null) ? '' : String(Number(a.sggCd));
        const k1 = n + '|' + sg + '|' + (a.umdNm || '');
        if (!daejangCoordIndex.has(k1)) daejangCoordIndex.set(k1, a);
        const k2 = n + '|' + sg;                       // 동 불일치 폴백 (구대장/동명 표기차)
        if (!daejangCoordIndex.has(k2)) daejangCoordIndex.set(k2, a);
      }
    }
    function daejangFindCoord(aptNm, sgg, umd) {
      if (!daejangCoordIndex) daejangBuildCoordIndex();
      const n = normalizeName(aptNm);
      const sg = (sgg == null) ? '' : String(Number(sgg));
      return daejangCoordIndex.get(n + '|' + sg + '|' + (umd || ''))
          || daejangCoordIndex.get(n + '|' + sg)
          || null;
    }

    /* ── 집계: 거래 1건 → (구/동)×평형×연도 최고가 ── */
    function daejangPut(yb, k, rec) {
      const cur = yb[k];
      if (!cur || rec.amt > cur.amt) yb[k] = rec;
    }
    function daejangFeed(yb, it) {
      if (isCancelledDeal(it)) return;                       // 해제거래 제외 (기존 함수 재사용)
      const ar = Number(it?.excluUseAr);
      if (!Number.isFinite(ar)) return;
      let band = null;
      if (ar >= 59.0 && ar < 60.0) band = '59';
      else if (ar >= 84.0 && ar < 85.0) band = '84';
      if (!band) return;
      const y = Number(it?.dealYear);
      if (!Number.isFinite(y) || y < DAEJANG_START_YEAR) return;
      const amt = Number(String(it?.dealAmount ?? '').replace(/[^0-9]/g, ''));
      if (!Number.isFinite(amt) || amt <= 0) return;
      const sgg = Number(it?.sggCd);
      if (!Number.isFinite(sgg)) return;
      const umd = String(it?.umdNm ?? '').trim();
      const aptNm = String(it?.aptNm ?? '').trim();
      if (!aptNm) return;
      const meta = getAptMasterMeta({ aptNm, sggCd: sgg });
      if (!meta || meta.sds == null || meta.sds < 100) return;   // [27_8] 구·동대장 공통: 100세대 이상만 후보
      const mm = String(Number(it?.dealMonth) || 0).padStart(2, '0');
      const rec = {
        amt, apt: aptNm, ym: y + '.' + mm,
        floor: it?.floor ?? '', by: it?.buildYear ?? null,
        sgg, umd
      };
      daejangPut(yb, 'dong|' + sgg + '|' + umd + '|' + band + '|' + y, rec);   // 동대장
      daejangPut(yb, 'gu|'   + sgg + '|'          + band + '|' + y, rec);      // 구대장
    }

    function daejangProgress(done, total) {
      const pct = total > 0 ? Math.round(done / total * 100) : 0;
      const fill = document.getElementById('djLoadPct');
      const sub = document.getElementById('djLoadSub');
      if (fill) fill.style.width = pct + '%';
      if (sub) sub.textContent = '거래 파일 ' + done + ' / ' + total;
    }

    /* ★ frozen 전환 지점 — 이 함수만 사전집계 JSON fetch로 바꾸면 나머지는 그대로 재사용.
         현재: 기존 월별 매매 파일을 청크 병렬 fetch → 즉시 집계 → 원본 폐기(메모리 절약).
         fileCache 공유 → 거래량/미니트렌드가 이미 받은 달은 재요청 없음. */
    async function daejangLoadRegion(region) {
      if (daejangLoadedRegions.has(region)) return;
      const base = (region === 'busan') ? '../data/busan' : '../data';
      const files = [];
      for (let y = DAEJANG_START_YEAR; y <= END_YEAR; y++) {
        const mEnd = (y === END_YEAR) ? END_MONTH : 12;
        for (let m = 1; m <= mEnd; m++) {
          files.push(base + '/apt/data_' + y + '_' + String(m).padStart(2, '0') + '.json');
        }
      }
      const yb = daejangYearBest[region] || (daejangYearBest[region] = {});
      let done = 0;
      daejangProgress(0, files.length);
      for (let i = 0; i < files.length; i += DAEJANG_CHUNK) {
        const part = files.slice(i, i + DAEJANG_CHUNK);
        const results = await Promise.all(part.map(async (f) => {
          // 이미 거래량/미니트렌드가 받아둔 달은 재요청 없이 재사용.
          if (fileCache[f]) return fileCache[f];
          try {
            const res = await fetch(f);
            if (!res.ok) return [];
            return await res.json();
            // ※ 여기서 fileCache에 넣지 않는다 — 대장은 100개월+ 전 구간을 훑으므로
            //    원본을 캐시하면 메모리가 수백 MB로 불어난다(거래량은 슬라이더 범위만 캐시).
            //    집계 결과(daejangYearBest, 구/동×평형×연도 최고가 1건)만 남기고 원본은 GC에 맡긴다.
          } catch (e) { return []; }
        }));
        for (const arr of results) {
          for (const it of arr) daejangFeed(yb, it);
        }
        done += part.length;
        daejangProgress(done, files.length);
      }
      daejangLoadedRegions.add(region);
    }

    // 현재 화면(+여유)에 아파트가 있는 지역만 로드 대상으로 판단
    function daejangRegionsNeeded() {
      const box = metroGetViewportBox();
      const set = new Set();
      for (const a of APTS) {
        if (!metroPointInViewport(Number(a.lat), Number(a.lng), box)) continue;
        set.add(isBusanSgg(a.sggCd) ? 'busan' : 'ulsan');
        if (set.size === 2) break;
      }
      if (set.size === 0) set.add('ulsan');   // 화면에 단지가 없으면 기본 울산
      return [...set];
    }

    // [27_6] 대장 모드 중 울산↔부산 이동 시 현재 화면의 미로드 지역을 자동 집계.
    async function daejangEnsureViewportRegions(renderAfter) {
      if (!isDaejangMode || daejangLoading) return false;
      let loadedAny = false;
      daejangLoading = true;
      const loadEl = document.getElementById('daejangLoading');
      loadEl.classList.add('show');
      try {
        // 로딩 도중 반대 지역으로 이동해도, 완료 직후 현재 화면을 다시 확인해 이어서 받는다.
        while (isDaejangMode) {
          const targets = daejangRegionsNeeded().filter(r => !daejangLoadedRegions.has(r));
          if (targets.length === 0) break;
          for (const rg of targets) {
            await daejangLoadRegion(rg);
            loadedAny = true;
          }
        }
      } finally {
        loadEl.classList.remove('show');
        daejangLoading = false;
      }
      if (renderAfter && loadedAny && isDaejangMode) daejangRender();
      return loadedAny;
    }

    /* ── 시퀀스 빌드: 연도별 대장 → 재위(N대) 병합 + 좌표 부착 ── */
    function daejangBuildSeq(region, scope, size) {
      const ck = region + '|' + scope + '|' + size;
      if (daejangAggCache[ck]) return daejangAggCache[ck];

      const yb = daejangYearBest[region] || {};
      const groups = {};
      const prefix = scope + '|';
      for (const k in yb) {
        if (!k.startsWith(prefix)) continue;
        const parts = k.split('|');
        let sgg, umd, band, year, gkey;
        if (scope === 'dong') {
          // dong|sgg|umd|band|year
          sgg = Number(parts[1]); umd = parts[2]; band = parts[3]; year = Number(parts[4]);
          gkey = sgg + '|' + umd;
        } else {
          // gu|sgg|band|year
          sgg = Number(parts[1]); umd = ''; band = parts[2]; year = Number(parts[3]);
          gkey = String(sgg);
        }
        if (band !== size) continue;
        if (!groups[gkey]) groups[gkey] = { sgg, umd, years: {} };
        groups[gkey].years[year] = yb[k];
      }

      const out = [];
      for (const gkey in groups) {
        const g = groups[gkey];
        const years = Object.keys(g.years).map(Number).sort((a, b) => a - b);
        const rs = [];
        for (const y of years) {
          const v = g.years[y];
          const last = rs[rs.length - 1];
          if (last && last.nm === v.apt) {
            last.y1 = y;
            if (v.amt > last.amt) { last.amt = v.amt; last.ym = v.ym; last.floor = v.floor; last.by = v.by; }
          } else {
            rs.push({
              nm: v.apt, y0: y, y1: y, amt: v.amt, ym: v.ym,
              floor: v.floor, by: v.by, umd: v.umd, lat: null, lng: null
            });
          }
        }
        if (rs.length === 0) continue;
        for (const r of rs) {
          const c = daejangFindCoord(r.nm, g.sgg, r.umd);
          if (c) {
            r.lat = c.lat; r.lng = c.lng;
            // [27_5] 기본 지도와 같은 규약을 쓰기 위해 APTS 항목의 값을 함께 보관.
            //   disp  = 라벨 표기 전용(dispNm). 데이터 조회 키는 여전히 aptNm(r.nm) — 원칙 유지.
            //   gu/aptBy = 상세 패널(openDongAreaPanel)에 넘길 값. r.by(거래데이터 준공년)와 구분.
            r.disp  = (c.dispNm != null) ? c.dispNm : null;
            r.gu    = c.gu || null;
            r.aptBy = (c.buildYear != null) ? c.buildYear : null;
          }
        }
        const cur = rs[rs.length - 1];
        if (cur.lat == null) continue;   // 현재 대장 좌표 미보유 → 그 구/동 생략 (2위 대체 없음)
        out.push({ scope, key: gkey, sgg: g.sgg, umd: g.umd, rs });
      }
      daejangAggCache[ck] = out;
      return out;
    }

    /* ── 지역 구분 색: 인접(1.5km) 회피 + 팔레트 균등 사용 ── */
    function daejangAssignColors(groups) {
      daejangColorMap = {};
      const used = [];
      const cnt = DJ_PAL.map(() => 0);
      for (const g of groups) {
        const c = djCurOf(g);
        const taken = {};
        for (const u of used) {
          if (getDistanceMeters(u.lat, u.lng, c.lat, c.lng) < 1500) taken[u.ci] = 1;
        }
        let ci = -1;
        for (let k = 0; k < DJ_PAL.length; k++) {
          if (taken[k]) continue;
          if (ci === -1 || cnt[k] < cnt[ci]) ci = k;
        }
        if (ci === -1) {
          ci = 0;
          for (let j = 1; j < DJ_PAL.length; j++) if (cnt[j] < cnt[ci]) ci = j;
        }
        cnt[ci]++;
        daejangColorMap[g.scope + '|' + g.key] = DJ_PAL[ci];
        used.push({ lat: c.lat, lng: c.lng, ci });
      }
    }

    /* ── 그리기: 왕관/은왕관 정류장 ──
       [27_2] 라벨은 기본 아파트 이름창(.aptLabel) 재사용 — 미니 트렌드 배경(applyTrendBgToLabel)도 그대로.
              지역명(구/동)은 라벨에서 빼고 아래에 연도별 원형 칩(25·26)을 표시.
              라벨 아래 점 마커는 두지 않음(기본 지도가 마커를 투명 처리하는 것과 동일). */
    function daejangDrawGroup(g) {
      const cur = djCurOf(g);
      const color = djColorOf(g);
      const tier = { c: color, d: color };   // [27_7] 왕관·연도·계보선 색 통일
      const title = daejangGroupTitle(g);

      const makeStop = (r, isCur) => {
        // [27_4] CustomOverlay content = 기본 라벨(.aptLabel) '단일 div'.
        //   왕관/연도칩은 라벨의 absolute 자식으로 위·아래에 띄운다 → content의 레이아웃 크기가
        //   라벨 텍스트만으로 결정되어 xAnchor/yAnchor 계산이 줌마다 흔들리지 않는다.
        //   (.aptLabel의 bottom:32px 규칙도 기본 지도와 동일하게 그대로 적용)
        const label = document.createElement('div');
        label.className = 'aptLabel dj-label' + (isCur ? '' : ' dj-past');
        // [27_5] 기본 지도와 동일한 라벨 규약:
        //   표기 이름(dispNm) 있으면 그것을, 없으면 aptNm을 — 둘 다 truncateAptName으로 줌 절단.
        //   원본/표기명은 dataset(aptnm/dispnm)에 보관해 zoom_changed 때 복원한다.
        const dispNm = (r.disp != null) ? r.disp : null;
        const labelName = truncateAptName((dispNm != null) ? dispNm : r.nm, map.getLevel());
        label.innerHTML = '<span class="apt-name-text">' + escapeHtml(labelName) + '</span>';
        label.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
        label.style.borderColor = color;   // [27_9] 이름창 테두리 = 그 구/동의 계보선 색 (동별 통일감)
        label.dataset.aptnm = r.nm;                       // 원본 aptNm (조회 키 · 이름 복원용)
        if (dispNm != null) label.dataset.dispnm = dispNm;
        label.dataset.djSgg = String(g.sgg);
        applyTrendBgToLabel(label, { aptNm: r.nm, sggCd: g.sgg });   // 미니 트렌드(토글 상태 반영)

        // [27_10] 지역명(동대장=동, 구대장=구)을 이름창 우상단 배지로 (정적 왕관 대체)
        const badge = document.createElement('span');
        badge.className = 'dj-region-badge';
        badge.textContent = daejangShortTitle(g);
        badge.style.color = color;
        label.appendChild(badge);

        // [27_10] 현재 대장에만 순회 왕관. 개수 = 연속 재위 연수(1/2/3). 과거 대장은 왕관 없음(현행 유지).
        if (isCur) {
          attachCrownsToLabel(label, color, daejangCrownCount(g));
        }

        // 대장이던 연도 칩 — 라벨 아랫변 아래 (한 줄, 테두리 = 계보선 색)
        const chips = document.createElement('div');
        chips.className = 'dj-chips';
        for (const p of djVisitList(g, r.nm)) {
          const chip = document.createElement('span');
          chip.className = 'dj-chip' + (isCur ? ' now' : '');
          chip.textContent = p;
          chip.style.borderColor = color;
          if (isCur) chip.style.background = 'linear-gradient(180deg,' + tier.c + ',' + tier.d + ')';
          chips.appendChild(chip);
        }
        label.appendChild(chips);

        label.title = r.nm + ' · ' + title + ' · 대장 ' + djVisits(g, r.nm) + (isCur ? ' (현재)' : '');
        label.addEventListener('click', (e) => {
          e.stopPropagation();
          if (labelGestureConsumed()) return;   // [30_6] 드래그·핀치였으면 팝업을 열지 않는다
          daejangShowPopup(g, label);
        });
        label.addEventListener('mousedown', (e) => e.stopPropagation());
        // [30_6] 대장 라벨도 기본 지도 이름창과 동일 규약. legacy면 아래 기존 전면 차단 줄이 그대로 산다.
        if (LABEL_GESTURE === 'legacy') {
        label.addEventListener('touchstart', (e) => e.stopPropagation(), { passive: true });
        } else {
          bindLabelGesture(label);
        }

        const ov = new kakao.maps.CustomOverlay({
          map, position: new kakao.maps.LatLng(r.lat, r.lng),
          content: label, xAnchor: 0.5, yAnchor: 1,
          zIndex: isCur ? (30 + Math.min(9000, Math.round(cur.amt / 20))) : 24,
          // [30_6] clickable:true면 카카오가 '오버레이 컨테이너 자체'에서 이벤트를 가로채므로(27_16 참조)
          //   내 stopPropagation을 풀어도 핀치가 지도까지 닿지 않는다 → gesture 모드에서는 false.
          //   라벨 클릭은 위 DOM 리스너가 직접 처리해 clickable에 의존하지 않는다(기본 지도 라벨과 동일 구조).
          //   대신 탭이 지도 click으로 새는 것은 labelGestureBlocksMapClick()이 막는다.
          clickable: (LABEL_GESTURE === 'legacy')
        });
        daejangOverlays.push(ov);
      };

      makeStop(cur, true);
      for (const st of djStations(g)) {
        if (st.nm === cur.nm) continue;
        makeStop(st, false);
      }

      daejangDrawEdges(g, color);
    }

    /* [27_5] 줌 변경 시 대장 라벨 이름 갱신 — 기본 지도의 zoom_changed 리스너(drawn 순회)와 동일 규칙.
       대장 오버레이는 drawn에 없으므로 여기서 따로 돌린다. */
    function daejangSyncLabelNames() {
      if (!isDaejangMode) return;
      const level = map.getLevel();
      for (const ov of daejangOverlays) {
        try {
          const el = ov.getContent && ov.getContent();
          if (!el || !el.dataset) continue;
          const orig = el.dataset.aptnm;
          if (!orig) continue;
          const span = el.querySelector('.apt-name-text');
          if (!span) continue;
          const disp = el.dataset.dispnm;
          span.textContent = truncateAptName((disp != null) ? disp : orig, level);
        } catch (e) {}
      }
    }

    /* [27_2] '미니 차트' 토글 → 대장 라벨에도 즉시 반영 (drawn만 도는 applyMiniTrendToDrawn의 대장판) */
    function daejangApplyMiniTrend() {
      for (const ov of daejangOverlays) {
        try {
          const label = ov.getContent && ov.getContent();   // [27_4] content == .aptLabel
          if (!label || !label.dataset || !label.dataset.aptnm) continue;
          applyTrendBgToLabel(label, { aptNm: label.dataset.aptnm, sggCd: Number(label.dataset.djSgg) });
        } catch (e) {}
      }
    }

    /* ── 그리기: 계보선
       [27_12] Polyline 직선 분절이 아니라 AbstractOverlay 내부 SVG의 실제 Q 곡선.
       왕복은 A→B와 B→A가 각각 진행방향 오른쪽으로 휘어 렌즈형 순환선을 만든다. */
    function daejangDrawEdges(g, color) {
      const pos = {};
      for (const st of djStations(g)) pos[st.nm] = st;

      const dirset = {};
      for (let i = 0; i < g.rs.length - 1; i++) {
        const a = g.rs[i], b = g.rs[i + 1];
        if (a.lat == null || b.lat == null || a.nm === b.nm) continue;
        dirset[a.nm + '\u0001' + b.nm] = [a.nm, b.nm];
      }

      const curve = (A, B, isLoop) => {
        if (!A || !B || A.lat == null || B.lat == null) return;
        const overlay = new DaejangCurveOverlay(A, B, color, isLoop);
        overlay.setMap((map.getLevel() >= DAEJANG_FAR_LEVEL) ? null : map);
        daejangLines.push(overlay);
      };

      const loopDone = {};
      for (const k in dirset) {
        const [f, t] = dirset[k];
        const isLoop = dirset[t + '\u0001' + f] !== undefined;
        if (isLoop) {
          const pk = [f, t].sort().join('\u0001');
          if (loopDone[pk]) continue;
          loopDone[pk] = 1;
          curve(pos[f], pos[t], true);
          curve(pos[t], pos[f], true);
        } else {
          curve(pos[f], pos[t], false);
        }
      }
    }

    /* ── 계보 팝업 (위 → 아래 시간순) ── */
    function daejangClosePopup() {
      if (daejangPopupOv) { daejangPopupOv.setMap(null); daejangPopupOv = null; }
      document.querySelectorAll('.dj-label.dj-sel').forEach(el => el.classList.remove('dj-sel'));
    }
    function daejangShowPopup(g, anchorEl) {
      daejangClosePopup();
      if (anchorEl) anchorEl.classList.add('dj-sel');
      const cur = djCurOf(g);
      const total = g.rs.length;

      let rows = '';
      g.rs.forEach((r, i) => {
        const isCur = (i === total - 1);
        rows += '<div class="dj-row' + (isCur ? ' now' : '') + '">'
          + '<span class="dj-no">' + (i + 1) + '대</span>'
          + '<span class="dj-yr">' + djPeriod(r) + '</span>'
          + '<span class="dj-nm2">' + escapeHtml(r.nm) + (isCur ? ' 👑' : '')
          + (r.lat == null ? ' <span class="dj-noloc">(위치 미등록)</span>' : '') + '</span>'
          + '<span class="dj-am">' + djFmtShort(r.amt) + '</span>'
          + '</div>';
      });

      const el = document.createElement('div');
      el.className = 'dj-popup';
      el.innerHTML =
        '<button type="button" class="dj-x" aria-label="닫기">✕</button>'
        + '<div class="dj-head">👑 ' + escapeHtml(daejangGroupTitle(g)) + ' ' + daejangSize + '㎡'
        + '<small>' + (total > 1 ? '대장 ' + (total - 1) + '번 바뀜' : '교체 없음')
        + ' · ' + djShortYr(END_YEAR) + ' ' + escapeHtml(cur.nm) + ' ' + djFmtEok(cur.amt) + '</small></div>'
        + '<div class="dj-rows">' + rows + '</div>'
        + '<button type="button" class="dj-detail">' + escapeHtml(cur.nm) + ' 상세 보기</button>';

      // [30_6] 팝업 위에서도 핀치/드래그가 지도로 통과되게 한다. 제스처 뒤 브라우저가 click을 합성하면
      //   닫기(.dj-x)·상세(.dj-detail)가 오작동할 수 있으므로 캡처 단계에서 먼저 삼킨다
      //   (캡처는 자식 버튼 핸들러보다 먼저 실행되므로 stopPropagation으로 확실히 차단된다).
      if (LABEL_GESTURE !== 'legacy') {
        el.addEventListener('click', (e) => { if (labelGestureConsumed()) e.stopPropagation(); }, true);
      }
      el.addEventListener('click', (e) => e.stopPropagation());
      el.addEventListener('mousedown', (e) => e.stopPropagation());
      if (LABEL_GESTURE === 'legacy') {
      el.addEventListener('touchstart', (e) => e.stopPropagation(), { passive: true });
      } else {
        bindLabelGesture(el);
      }
      el.querySelector('.dj-x').addEventListener('click', (e) => { e.stopPropagation(); daejangClosePopup(); });
      el.querySelector('.dj-detail').addEventListener('click', (e) => {
        e.stopPropagation();
        // [27_5] 기본 지도(drawMarkers)와 동일한 인자 규약 — APTS 항목 기준(gu/buildYear).
        //   거래데이터의 buildYear(cur.by)는 팝업 표시용일 뿐, 패널에는 APTS 값을 우선 넘긴다.
        openDongAreaPanel({
          aptNm: cur.nm,
          gu: cur.gu || sggCdToGu(g.sgg),
          umdNm: cur.umd || g.umd || '',
          buildYear: (cur.aptBy != null) ? cur.aptBy : (cur.by ?? null),
          sggCd: g.sgg ?? null
        });
      });

      // [27_13] 투명 래퍼로 감싸 CustomOverlay content로 사용 — 래퍼(pointer-events:none)가
      //   왕관 위까지 띄우는 여백을 담당하고, 그 여백에서의 드래그는 지도로 통과(화면 이동 정상).
      const wrap = document.createElement('div');
      wrap.className = 'dj-popup-wrap';
      wrap.appendChild(el);

      // [27_16] clickable:false — 카카오가 컨테이너 이벤트를 가로채지 않게 하여
      //   래퍼(pointer-events:none)의 여백이 지도로 통과되게 함. 팝업 내부 조작은 el의 DOM 리스너가 처리.
      daejangPopupOv = new kakao.maps.CustomOverlay({
        map, position: new kakao.maps.LatLng(cur.lat, cur.lng),
        content: wrap, xAnchor: 0.5, yAnchor: 1, zIndex: 70000, clickable: false
      });
      map.panTo(new kakao.maps.LatLng(cur.lat, cur.lng));
    }

    /* ── 렌더 / 정리 ── */
    function daejangClear() {
      daejangClosePopup();
      for (const ov of daejangOverlays) { try { ov.setMap(null); } catch (e) {} }
      daejangOverlays = [];
      for (const l of daejangLines) { try { l.setMap(null); } catch (e) {} }
      daejangLines = [];
      activeDaejangCrowns.length = 0;   // [27_10] 순회 왕관 등록 해제 (다음 프레임에 rAF 자동 정지)
    }
    function daejangSyncFar() {
      const level = map.getLevel();
      const far = level >= DAEJANG_FAR_LEVEL;
      document.body.classList.toggle('dj-hide-years', isDaejangMode && level >= 5);
      document.body.classList.toggle('dj-far', isDaejangMode && far);
      if (!isDaejangMode) return;
      for (const l of daejangLines) { try { l.setMap(far ? null : map); } catch (e) {} }
      // [27_4] 원경에선 과거 대장 오버레이를 지도에서 제거 (CSS로 숨기지 않고 setMap으로 — 앵커 재계산 회피)
      for (const o of daejangOverlays) {
        try {
          const el = o.getContent && o.getContent();
          if (el && el.classList && el.classList.contains('dj-past')) o.setMap(far ? null : map);
        } catch (e) {}
      }
    }
    function daejangRender() {
      daejangClear();
      if (!isDaejangMode || !daejangScope) return;
      let all = [];
      for (const rg of daejangLoadedRegions) {
        all = all.concat(daejangBuildSeq(rg, daejangScope, daejangSize));
      }
      if (all.length === 0) {
        toast('해당 조건의 대장 데이터가 없습니다', 1500);
        return;
      }
      all.sort((a, b) => djCurOf(a).amt - djCurOf(b).amt);   // 고가가 나중에 그려져 위로
      daejangAssignColors(all);
      for (const g of all) daejangDrawGroup(g);
      daejangSyncFar();
      startDaejangCrownClock();   // [27_10] 순회 왕관 전역 시계 가동 (현재 대장 라벨에 부착됨)
      const label = (daejangScope === 'gu') ? '구대장' : '동대장';
      toast(label + ' ' + daejangSize + '㎡ · ' + all.length + '개 표시', 1300);
    }

    /* ── 모드 전환 ── */
    function closeDaejangScopeList() {
      const list = document.getElementById('daejangScopeList');
      if (list) list.classList.remove('open');
    }
    function daejangSyncButtons() {
      const btn = document.getElementById('btnDaejang');
      const list = document.getElementById('daejangScopeList');
      btn.classList.toggle('active', isDaejangMode || list.classList.contains('open'));
      document.querySelectorAll('.daejangScopeBtn').forEach(b => {
        b.classList.toggle('selected', isDaejangMode && b.dataset.scope === daejangScope);
      });
      // [27_3] 평형 스택은 '켜진 스코프' 행에서만 펼쳐진다 (대장→구/동대장 전개와 같은 계층)
      document.querySelectorAll('.dj-scope-row').forEach(row => {
        const sc = row.querySelector('.daejangScopeBtn');
        const on = isDaejangMode && sc && sc.dataset.scope === daejangScope;
        row.classList.toggle('on', !!on);
      });
      document.querySelectorAll('.daejangSizeBtn').forEach(b => {
        b.classList.toggle('selected',
          isDaejangMode && b.dataset.scope === daejangScope && b.dataset.size === daejangSize);
      });
    }

    function toggleDaejangMode(turnOn) {
      if (turnOn) {
        // 다른 모드/필터와 상호배타 (거래량 진입 로직과 동일 계열)
        if (isTransactionMode) toggleTransactionMode(false);
        document.querySelectorAll('#sideFilters .filterBtn').forEach(b => b.classList.remove('active'));
        activePanel = null;
        brandList.style.display = 'none';
        stationList.style.display = 'none';
        document.getElementById('schoolDistList').style.display = 'none';
        document.getElementById('bigList').style.display = 'none';
        document.getElementById('newList').style.display = 'none';
        selectedBrands = new Set();
        document.querySelectorAll('.brandBtn').forEach(b => b.classList.remove('selected'));
        if (isStationMode) {
          clearMetroOverlays();
          isStationMode = false;
          metroRadius = null;
          stationDisclaimer.style.display = 'none';
          document.querySelectorAll('.stationDistBtn').forEach(b => b.classList.remove('selected'));
        }
        if (isSchoolMode) hideSchoolMode();
        isBigMode = false; isNewMode = false; bigSds = null; newAge = null;
        document.querySelectorAll('.bigSdsBtn, .newAgeBtn').forEach(b => b.classList.remove('selected'));
        syncFeatureButtonStates();

        isDaejangMode = true;
        clearDrawn();                 // 대장 모드에선 아파트 라벨을 그리지 않음
        // [27_2] 대장 진입 시 미니 차트는 꺼진 상태로 시작(원하면 토글로 켤 수 있음). 진입 전 값은 보관 후 복원.
        if (daejangPrevMiniTrend === null) daejangPrevMiniTrend = miniTrendOn;
        miniTrendOn = false;
        updateMiniTrendToggleUI();
      } else {
        isDaejangMode = false;
        daejangScope = null;
        daejangSize = DAEJANG_DEFAULT_SIZE;   // [27_3] 다음 진입은 다시 59부터
        closeDaejangScopeList();
        daejangClear();
        document.body.classList.remove('dj-far', 'dj-hide-years');
        if (daejangPrevMiniTrend !== null) {     // [27_2] 진입 전 미니 차트 상태 복원
          miniTrendOn = daejangPrevMiniTrend;
          daejangPrevMiniTrend = null;
          updateMiniTrendToggleUI();
        }
        renderCombinedAptMarkersAndEffects();   // 베이스 상태로 복귀
      }
      daejangSyncButtons();
    }

    /* [27_2] 진입 일원화 — 스코프 버튼/평형 버튼이 공통으로 호출 (scope+size 동시 확정) */
    async function daejangEnter(scope, size) {
      if (daejangLoading) return;
      if (!isDaejangMode) toggleDaejangMode(true);
      daejangScope = scope;
      daejangSize = size;
      daejangSyncButtons();

      await daejangEnsureViewportRegions(false);
      if (!isDaejangMode) return;   // 로딩 중 사용자가 껐으면 중단
      daejangRender();
    }

    // 스코프 버튼: 같은 스코프 재클릭 = 해제. 새로 켤 때는 기본 평형(59)으로 시작.
    function setDaejangScope(scope) {
      if (isDaejangMode && daejangScope === scope) { toggleDaejangMode(false); return; }
      daejangEnter(scope, isDaejangMode ? daejangSize : DAEJANG_DEFAULT_SIZE);
    }

    // 평형 버튼: 그 행의 스코프 + 평형으로 진입/전환 (해제 없음)
    function setDaejangSize(scope, size) {
      if (isDaejangMode && daejangScope === scope && daejangSize === size) return;
      daejangEnter(scope, size);
    }

    /* ── 이벤트 바인딩 ── */
    document.getElementById('btnDaejang').addEventListener('click', () => {
      const list = document.getElementById('daejangScopeList');
      const willOpen = !list.classList.contains('open');
      list.classList.toggle('open', willOpen);
      if (!willOpen && isDaejangMode) toggleDaejangMode(false);   // 접으면 기능도 해제
      daejangSyncButtons();
    });
    document.querySelectorAll('.daejangScopeBtn').forEach(b => {
      b.addEventListener('click', () => { setDaejangScope(b.dataset.scope); });
    });
    document.querySelectorAll('.daejangSizeBtn').forEach(b => {
      b.addEventListener('click', () => { setDaejangSize(b.dataset.scope, b.dataset.size); });
    });
    // [27_2] '미니 차트' 토글에 추가 리스너 — 기존 핸들러(drawn 갱신) 실행 뒤 대장 라벨에도 반영.
    //   기존 bindMiniTrendToggle()은 무수정. addEventListener는 등록 순서대로 실행된다.
    (function () {
      const mt = document.getElementById('miniTrendToggle');
      if (mt) mt.addEventListener('click', () => { if (isDaejangMode) daejangApplyMiniTrend(); });
    })();
    kakao.maps.event.addListener(map, 'zoom_changed', () => {
      daejangSyncFar();
      daejangSyncLabelNames();   // [27_5] 기본 지도와 동일하게 줌별 이름 절단 반영
    });
    kakao.maps.event.addListener(map, 'click', () => {
      // [30_6] 대장 라벨/팝업이 clickable:false가 되면서 그 위의 탭도 지도 click으로 올라온다.
      //   라벨/팝업에서 시작된 터치의 지도 click만 1회 무시 — 빈 지도 탭으로 닫는 동작은 그대로.
      if (labelGestureBlocksMapClick()) return;
      if (isDaejangMode) daejangClosePopup();
    });
    /* ===== [30_7] 우측 하단 지도 액션 — 아파트 검색 · 내 위치(GPS) =====
       · 두 기능 모두 신규이므로 기존 코드는 한 줄도 건드리지 않는다. 읽기만 하는 것:
         map / APTS / toast / normalizeName / escapeHtml / sggCdToGu / getAptMasterMeta /
         openDongAreaPanel / presaleAptKeys / aptTrendLoaded.
       · 전부 IIFE 안에 가둬 최상위 스코프를 오염시키지 않는다(식별자 충돌 위험 0).
       · MAP_FAB_UI='off'면 버튼을 숨기고 배선을 건너뛴다(즉시 롤백).
       · 검색 오버레이는 history를 쌓지 않는다 — 상세 패널의 dapHistoryPushed와
         뒤로가기 소비 순서가 엉키면 패널이 열리자마자 닫히는 경합이 생긴다.
         닫기는 × / 딤 영역 탭 / ESC 세 가지로 충분히 덮인다. */
    const MAP_FAB_UI = 'on';           // 'on' | 'off'
    const SEARCH_MAX_RESULTS = 40;     // 목록에 그릴 최대 건수(초과분은 '외 N개'로 안내)
    /* [30_8] 검색 결과를 골랐을 때 할 일. 'move'=지도만 이동(기본) / 'panel'=30_7처럼 상세 패널까지 열기 */
    const SEARCH_PICK_ACTION = 'move';
    /* 서비스 지역(부산·울산) 대략 경계 — 밖이어도 이동은 하되 안내 토스트를 띄운다 */
    const SERVICE_BBOX = { minLat: 34.80, maxLat: 35.95, minLng: 128.60, maxLng: 129.60 };

    (function initMapFabs(){
      const fabs = document.getElementById('mapFabs');
      const box  = document.getElementById('aptSearch');
      if (!fabs || !box) return;
      if (MAP_FAB_UI !== 'on') { fabs.style.display = 'none'; return; }

      const gpsBtn    = document.getElementById('gpsFab');
      const searchBtn = document.getElementById('searchFab');
      const input     = document.getElementById('aptSearchInput');
      const listEl    = document.getElementById('aptSearchList');
      const closeBtn  = document.getElementById('aptSearchClose');

      /* 현재 화면 안이면 부드럽게(panTo), 멀면 즉시(setCenter).
         먼 거리 panTo는 중간이 빈 타일로 길게 흐르며 느리다. */
      function moveMapTo(lat, lng, level){
        const pos = new kakao.maps.LatLng(lat, lng);
        if (Number.isFinite(level) && map.getLevel() > level) map.setLevel(level);
        let inside = false;
        try { inside = map.getBounds().contain(pos); } catch(_) {}
        if (inside) map.panTo(pos); else map.setCenter(pos);
      }

      /* 역세권/학구도 안내 배너는 하단 전폭을 차지하고 높이가 가변이다.
         배너가 뜨면 실측 높이만큼 버튼을 밀어 올린다(배너에 클래스가 없어 style 속성을 관찰). */
      const banners = [document.getElementById('stationDisclaimer'), document.getElementById('schoolDisclaimer')];
      function syncFabBottom(){
        let h = 0;
        for (const b of banners){
          if (b && getComputedStyle(b).display !== 'none') h = Math.max(h, b.offsetHeight);
        }
        fabs.style.bottom = (h > 0 ? h + 20 : 40) + 'px';
      }
      const bannerObs = new MutationObserver(syncFabBottom);
      for (const b of banners) if (b) bannerObs.observe(b, { attributes: true, attributeFilter: ['style'] });
      window.addEventListener('resize', syncFabBottom);
      syncFabBottom();

      /* ─────────── 1) 내 위치(GPS) ─────────── */
      let gpsOv = null, gpsBusy = false;

      function showGpsMarker(lat, lng){
        const pos = new kakao.maps.LatLng(lat, lng);
        if (!gpsOv){
          const w = document.createElement('div');
          w.className = 'gps-wrap';
          w.innerHTML = '<div class="gps-ring"></div><div class="gps-dot"></div>';
          gpsOv = new kakao.maps.CustomOverlay({
            position: pos, content: w, xAnchor: 0.5, yAnchor: 0.5, zIndex: 5, clickable: false
          });
        } else {
          gpsOv.setPosition(pos);
        }
        gpsOv.setMap(map);
      }

      gpsBtn.addEventListener('click', () => {
        if (gpsBusy) return;
        if (!navigator.geolocation){ toast('이 브라우저는 위치 기능을 지원하지 않습니다', 2400); return; }
        // https(또는 localhost)가 아니면 브라우저가 요청 자체를 거부한다 → 원인을 명확히 알린다.
        if (window.isSecureContext === false){ toast('위치 기능은 https 주소에서만 동작합니다', 2800); return; }

        gpsBusy = true;
        gpsBtn.classList.add('loading');
        navigator.geolocation.getCurrentPosition(
          (p) => {
            gpsBusy = false;
            gpsBtn.classList.remove('loading');
            const lat = p.coords.latitude, lng = p.coords.longitude;
            showGpsMarker(lat, lng);
            gpsBtn.classList.add('located');
            moveMapTo(lat, lng, 4);
            const inArea = lat >= SERVICE_BBOX.minLat && lat <= SERVICE_BBOX.maxLat &&
                           lng >= SERVICE_BBOX.minLng && lng <= SERVICE_BBOX.maxLng;
            if (!inArea) toast('현재 위치가 서비스 지역(부산·울산) 밖입니다', 2800);
          },
          (err) => {
            gpsBusy = false;
            gpsBtn.classList.remove('loading');
            const code = err && err.code;
            toast(code === 1 ? '위치 권한이 꺼져 있습니다. 브라우저 설정에서 허용해 주세요'
                : code === 3 ? '위치 확인이 지연됩니다. 잠시 후 다시 시도해 주세요'
                : '현재 위치를 확인할 수 없습니다', 3000);
          },
          { enableHighAccuracy: true, timeout: 10000, maximumAge: 30000 }
        );
      });

      /* ─────────── 2) 아파트 검색 ─────────── */
      let rows = [];     // 현재 그려진 결과(APTS 원소)
      let cursor = -1;   // 키보드 선택 위치

      /* 이름(aptNm·dispNm) 우선, 못 찾으면 동·구 이름으로도 매칭.
         normalizeName이 공백과 -_. 을 지우므로 '문수로 2차'와 '문수로2차'가 같게 잡힌다. */
      function queryApts(q){
        const nq = normalizeName(q);
        if (!nq) return { list: [], total: 0 };
        const head = [], mid = [], area = [];
        const seen = new Set();
        for (const a of APTS){
          // apt_coor + silv_coor 중복 제거. 키 규약은 트렌드/메타 조회와 동일(이름|시군구코드).
          const key = normalizeName(a.aptNm) + '|' + (a.sggCd == null ? '' : a.sggCd);
          if (seen.has(key)) continue;
          const n1 = normalizeName(a.aptNm);
          const n2 = a.dispNm ? normalizeName(a.dispNm) : n1;
          let i = n1.indexOf(nq);
          if (i < 0) i = n2.indexOf(nq);
          if (i === 0)    { seen.add(key); head.push(a); }
          else if (i > 0) { seen.add(key); mid.push(a); }
          else if (normalizeName(a.umdNm).includes(nq) || normalizeName(a.gu || '').includes(nq)) { seen.add(key); area.push(a); }
        }
        const byLen = (x, y) => x.aptNm.length - y.aptNm.length || x.aptNm.localeCompare(y.aptNm, 'ko');
        head.sort(byLen); mid.sort(byLen); area.sort(byLen);
        const all = head.concat(mid, area);
        return { list: all.slice(0, SEARCH_MAX_RESULTS), total: all.length };
      }

      // 지도 라벨의 분양 판정(drawMarkers)과 같은 규칙 — 데이터 미도착이면 조용히 false.
      function isPresaleApt(a){
        try {
          return aptTrendLoaded &&
            presaleAptKeys.has(normalizeName(a.aptNm) + '|' + (a.sggCd == null ? '' : String(Number(a.sggCd))));
        } catch(_) { return false; }
      }

      // 원문 기준 부분 하이라이트(정규화 문자열은 공백이 지워져 위치가 어긋나므로 원문으로만).
      function hi(text, q){
        const t = String(text);
        const i = q ? t.toLowerCase().indexOf(q.toLowerCase()) : -1;
        if (i < 0) return escapeHtml(t);
        return escapeHtml(t.slice(0, i)) + '<mark>' + escapeHtml(t.slice(i, i + q.length)) + '</mark>' + escapeHtml(t.slice(i + q.length));
      }

      function render(){
        const q = input.value.trim();
        cursor = -1;
        if (!q){
          rows = [];
          listEl.innerHTML = '<div class="as-msg">아파트 이름이나 동 이름을 입력하세요</div>';
          return;
        }
        if (!APTS.length){
          rows = [];
          listEl.innerHTML = '<div class="as-msg">아파트 데이터를 불러오는 중입니다</div>';
          return;
        }
        const found = queryApts(q);
        rows = found.list;
        if (!rows.length){
          listEl.innerHTML = '<div class="as-msg">검색 결과가 없습니다</div>';
          return;
        }
        let html = '';
        rows.forEach((a, i) => {
          const meta = getAptMasterMeta(a);
          const bits = [];
          const where = [a.gu || '', a.umdNm || ''].filter(Boolean).join(' ');
          if (where) bits.push(escapeHtml(where));
          const by = (meta && meta.buildYear != null) ? meta.buildYear : a.buildYear;
          if (by != null) bits.push(by + '년');
          if (meta && meta.sds != null) bits.push(meta.sds.toLocaleString() + '세대');
          html += '<button type="button" class="as-row" data-i="' + i + '">'
                +   '<div class="as-nm">' + hi(a.dispNm || a.aptNm, q)
                +     (isPresaleApt(a) ? '<span class="as-tag">분양</span>' : '')
                +   '</div>'
                +   '<div class="as-sub">' + (bits.join(' · ') || '&nbsp;') + '</div>'
                + '</button>';
        });
        if (found.total > rows.length){
          html += '<div class="as-more">외 ' + (found.total - rows.length) + '개 — 검색어를 더 입력해 보세요</div>';
        }
        listEl.innerHTML = html;
        listEl.scrollTop = 0;
      }

      function syncCursor(){
        const items = listEl.querySelectorAll('.as-row');
        items.forEach((el, i) => el.classList.toggle('on', i === cursor));
        if (cursor >= 0 && items[cursor]) items[cursor].scrollIntoView({ block: 'nearest' });
      }

      /* [30_8] 결과를 고르면 지도만 그 단지 중심으로 옮긴다.
         상세 패널까지 바로 열면 화면 절반이 덮여 '어디로 갔는지' 확인이 안 된다.
         패널은 지도 위 이름창을 탭하면 기존 경로로 열린다.
         SEARCH_PICK_ACTION='panel'이면 30_7 동작(이동 + 패널 즉시 열기)으로 되돌아간다. */
      function pickRow(i){
        const a = rows[i];
        if (!a) return;
        closeSearch();
        moveMapTo(a.lat, a.lng, 4);
        if (SEARCH_PICK_ACTION !== 'panel') return;
        openDongAreaPanel({
          aptNm: a.aptNm,
          gu: a.gu || sggCdToGu(a.sggCd),
          umdNm: a.umdNm || '',
          buildYear: a.buildYear ?? null,
          sggCd: a.sggCd ?? null
        });
      }

      function openSearch(){
        box.classList.add('open');
        input.value = '';
        render();
        input.focus();   // 클릭이라는 사용자 제스처 안에서 호출해야 모바일 키보드가 올라온다
      }
      function closeSearch(){
        box.classList.remove('open');
        input.blur();
      }

      searchBtn.addEventListener('click', openSearch);
      closeBtn.addEventListener('click', closeSearch);
      box.addEventListener('click', (e) => { if (e.target === box) closeSearch(); });   // 딤 영역 탭 → 닫기
      input.addEventListener('input', render);
      input.addEventListener('keydown', (e) => {
        if (!rows.length){
          if (e.key === 'Enter') e.preventDefault();
          return;
        }
        if (e.key === 'ArrowDown'){ e.preventDefault(); cursor = (cursor + 1) % rows.length; syncCursor(); return; }
        if (e.key === 'ArrowUp'){   e.preventDefault(); cursor = (cursor <= 0 ? rows.length : cursor) - 1; syncCursor(); return; }
        if (e.key === 'Enter'){     e.preventDefault(); pickRow(cursor < 0 ? 0 : cursor); }
      });
      listEl.addEventListener('click', (e) => {
        const b = e.target.closest('.as-row');
        if (b) pickRow(Number(b.dataset.i));
      });
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && box.classList.contains('open')) closeSearch();
      });
    })();

    (async function init(){
      setDongAreaPanelWidth(currentDongAreaWidth);
      initDongAreaResize();
      initSlider(); 
      await loadApts();
      await loadSilvCoords(); // [27_37] 분양권 좌표(silv_coor.json) APTS에 append — 반드시 loadApts() 뒤
      await loadAptMasterMeta(); // [26_10] 대단지(세대수)/신축(준공년도) 메타 일괄 로드 (MySQL)
      await loadAptTrendData(); // [index_20_2] 이름창 배경 시세 추이 데이터 미리 로드
      initTxPanelV08();         // [30_5] 거래량 패널 v0.8 배선 (TX_PANEL_UI='legacy'면 즉시 반환)
      await initSchoolModeData();
      document.querySelectorAll('.filterBtn').forEach(b => b.classList.remove('active'));
      activePanel = null;
      brandList.style.display = 'none';
      stationList.style.display = 'none';
      document.getElementById('schoolDistList').style.display = 'none';
      document.getElementById('bigList').style.display = 'none';   // [26_10]
      document.getElementById('newList').style.display = 'none';   // [26_10]
      selectedBrands = new Set();
      isStationMode = false;
      isSchoolMode = false;
      isBigMode = false;   // [26_10]
      isNewMode = false;   // [26_10]
      bigSds = null;       // [26_10]
      newAge = null;       // [26_10]
      resetSchoolDistButtons();
      metroRadius = null; // [index_20] 디폴트를 '전체'로 두지 않음 → 미선택 상태
      document.querySelectorAll('.brandBtn').forEach(b => b.classList.remove('selected'));
      document.querySelectorAll('.bigSdsBtn, .newAgeBtn').forEach(b => b.classList.remove('selected')); // [26_10]
      setDongAreaTitle(null);
      updateLeftUiPosition();
      syncFeatureButtonStates();
      // [index_20_1] 초기 로딩 시 빈 화면 대신 전체 아파트를 화면 기준으로 표시
      renderCombinedAptMarkersAndEffects();
    })();
  </script>
  <script src="/tracker.js"></script>
</body>
</html>