/* ─── 전체 레이아웃 ─── */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #f4f6fb; font-family: 'Noto Sans KR', sans-serif; }
    :root { --hdr-h: 56px; } /* 헤더 실제 높이 — 모바일에서 필터 행이 추가되면 미디어쿼리에서 재정의 */

    /* ─── 상단 필터바 ─── */
    .lp-header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 500;
      background: #fff;
      border-bottom: 1px solid #e2e8f0;
      box-shadow: 0 1px 6px rgba(0,0,0,.08);
    }
    .lp-nav {
      display: flex; align-items: center; gap: 12px;
      padding: 0 20px; height: 56px;
    }
    .lp-logo {
      display: flex; align-items: center; gap: 0px;
      font-size: 18px; font-weight: 800; color: #1a56db;
      text-decoration: none; white-space: nowrap; margin-right: 8px;
    }
    .lp-logo span { color: #e65c00; }
    .lp-search-wrap {
      flex: 1; max-width: 280px;
      display: flex; align-items: center;
      background: #f1f5fd; border: 1.5px solid #d0d8f0;
      border-radius: 8px; padding: 0 10px; gap: 6px;
    }
    .lp-search-wrap input {
      flex: 1; border: none; background: transparent;
      font-size: 13px; color: #1e293b; outline: none;
      height: 36px;
    }
    .lp-search-wrap svg { flex-shrink: 0; color: #94a3b8; }
    /* 검색행 래퍼 — 데스크톱에선 박스 없이 자식들이 그대로 .lp-nav의 flex 아이템이 되도록 */
    .lp-search-row { display: contents; }
    .lp-icon-btn { display: none; }

    /* ⚠ 2026-08-29: 여기 있던 overflow-x:auto가 데스크톱에도 적용되고 있었는데,
       overflow-x를 auto로 주면(overflow-y를 안 건드려도) CSS 스펙상 overflow-y도
       자동으로 auto가 되어버려 — 이 안에 있는 .lp-dropdown(지역/금액 등 팝업)이
       top:calc(100% + 8px)로 이 박스 바깥(아래)에 떠야 하는데 그 부분이 그대로
       잘려서(clip) 안 보이게 됨. 실제로는 '눌러도 팝업이 안 보인다(=안 눌린다)'로
       체감됨. 가로 스크롤은 모바일 전용 기능이라 아래 768px 미디어쿼리에 이미
       따로 정의돼 있으므로 여기 데스크톱 기본 규칙에서는 제거한다. */
    .lp-filter-group {
      display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    }
    .lp-filt-btn {
      padding: 3px 8px; border-radius: 14px;
      border: 1.5px solid #cbd5e1; background: #fff;
      font-size: 10.5px; font-weight: 600; color: #475569;
      cursor: pointer; white-space: nowrap;
      transition: all .15s;
    }
    .lp-filt-btn:hover { border-color: #1a56db; color: #1a56db; }
    .lp-filt-btn.active { border-color: #1a56db; background: #eff6ff; color: #1a56db; }

    /* 2026-08-29: 필터 캡슐 그룹(.sf-dd-group)과 초기화 원형 아이콘 버튼
       (.lp-filt-reset-icon) 스타일은 agent.html/myprops.html에서도 그대로 재사용하도록
       공용 파일(assets/css/search-filters.css)로 옮겼다 — 여기 list.css에는
       list.html 전용(.lp-filt-btn 기본형/.lp-dropdown 등)만 남긴다. */

    /* 드롭다운 */
    .lp-dd-wrap { position: relative; }
    .lp-dropdown {
      position: absolute; top: calc(100% + 8px); left: 0;
      background: #fff; border: 1px solid #e2e8f0;
      border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.13);
      padding: 16px 16px 12px; min-width: 220px; z-index: 600;
      display: none;
    }
    .lp-dropdown.show { display: block; }
    /* 모바일: 드롭다운을 fixed 풀스크린 바텀시트로 */
    @media (max-width: 768px) {
      .lp-dropdown {
        position: fixed; top: auto; left: 0; right: 0; bottom: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 32px rgba(0,0,0,.18);
        padding: 20px 16px 28px;
        max-height: 75vh; overflow-y: auto;
        min-width: unset;
      }
      .lp-dropdown::before {
        content: ''; display: block; width: 36px; height: 4px;
        background: #e2e8f0; border-radius: 2px;
        margin: 0 auto 14px;
      }
    }
    .lp-dd-label { font-size: 11px; font-weight: 700; color: #94a3b8; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }

    /* 탭그룹 칩 영역 */
    .lp-dd-options { display: flex; flex-wrap: wrap; gap: 7px; }
    /* 개별 유형 그리드 */
    .lp-dd-type-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }
    .lp-dd-type-grid .lp-dd-chip {
      text-align: center; justify-content: center;
      padding: 7px 6px; font-size: 12px; border-radius: 8px;
    }

    .lp-dd-chip {
      padding: 6px 12px; border-radius: 20px;
      border: 1.5px solid #e2e8f0; font-size: 12px; font-weight: 500;
      color: #475569; cursor: pointer; transition: all .15s;
      user-select: none;
    }
    .lp-dd-chip:hover { border-color: #93c5fd; background: #f0f7ff; color: #1a56db; }
    .lp-dd-chip.active { border-color: #1a56db; background: #eff6ff; color: #1a56db; font-weight: 700; }

    /* 탭그룹 칩 (파란 테두리) */
    .lp-dd-group-chip {
      padding: 8px 10px; border-radius: 20px;
      border: 1.5px solid #3b82f6; background: #f0f7ff;
      font-size: 12px; font-weight: 600; color: #3b82f6;
      cursor: pointer; transition: all .15s; user-select: none;
      text-align: center; line-height: 1.3;
    }
    .lp-dd-group-chip:hover { background: #dbeafe; border-color: #2563eb; color: #1d4ed8; }
    .lp-dd-group-chip.selected { background: #3b82f6; color: #fff; }

    .lp-dd-section-title {
      font-size: 11px; font-weight: 700; color: #64748b;
      display: flex; align-items: center; gap: 5px;
      margin: 10px 0 7px;
    }
    .lp-dd-divider { height: 1px; background: #f1f5f9; margin: 10px 0; }

    /* 지역(시/도>시/군/구>동) 캐스케이딩 select — 2026-08-28 */
    .lp-dd-select {
      width: 100%; padding: 7px 8px; border-radius: 6px;
      border: 1px solid #e2e8f0; font-size: 12px; color: #1e293b;
      background: #f8fafc;
    }
    .lp-dd-select:disabled { color: #94a3b8; background: #f1f5f9; cursor: not-allowed; }
    .lp-dd-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; gap: 6px; }
    .lp-dd-confirm { padding: 7px 16px; background: #1a56db; color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
    .lp-dd-clear { padding: 7px 14px; background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 12px; cursor: pointer; }
    /* 면적 단위 토글 */
    .area-unit-toggle { display:flex; border:1px solid #e2e8f0; border-radius:6px; overflow:hidden; }
    .area-unit-btn { padding:3px 10px; font-size:11px; font-weight:600; border:none; background:#f8fafc; color:#94a3b8; cursor:pointer; transition:all .15s; }
    .area-unit-btn.active { background:#1a56db; color:#fff; }
    /* 면적 종류 라디오 */
    .area-type-row { display:flex; align-items:center; gap:5px; font-size:12px; color:#475569; cursor:pointer; padding:4px 6px; border-radius:4px; }
    .area-type-row:hover { background:#f1f5f9; }
    .area-type-row input { accent-color:#1a56db; cursor:pointer; }
    /* 평↔㎡ 전환 버튼 (카드 상단) */
    .area-conv-bar { display:flex; align-items:center; justify-content:flex-end; padding:6px 16px 0; gap:0; }
    .area-conv-btn { padding:3px 10px; font-size:11px; font-weight:600; border:1px solid #e2e8f0; background:#f8fafc; color:#94a3b8; cursor:pointer; transition:all .15s; }
    .area-conv-btn:first-child { border-radius:6px 0 0 6px; border-right:none; }
    .area-conv-btn:last-child { border-radius:0 6px 6px 0; }
    .area-conv-btn.active { background:#1a56db; color:#fff; border-color:#1a56db; }

    /* 뷰 전환 */
    .lp-view-toggle { margin-left: auto; display: flex; border: 1.5px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
    .lp-vbtn { padding: 7px 14px; font-size: 12px; font-weight: 600; color: #64748b; background: #fff; cursor: pointer; border: none; display: flex; align-items: center; gap: 5px; transition: all .15s; }
    .lp-vbtn + .lp-vbtn { border-left: 1.5px solid #e2e8f0; }
    .lp-vbtn.active { background: #1a56db; color: #fff; }

    /* 네비게이션 링크 */
    .lp-nav-links { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
    .lp-nav-link { padding: 6px 10px; font-size: 12px; font-weight: 500; color: #475569; text-decoration: none; border-radius: 6px; white-space: nowrap; }
    .lp-nav-link:hover { background: #f1f5f9; color: #1a56db; }
    .lp-nav-actions { display: flex; align-items: center; gap: 8px; }
    .lp-btn-sm { padding: 6px 13px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
    .lp-btn-outline { border: 1.5px solid #cbd5e1; background: #fff; color: #475569; }
    .lp-btn-primary { border: none; background: #1a56db; color: #fff; }

    /* ─── 메인 콘텐츠 영역 ─── */
    .lp-body {
      display: flex;
      position: fixed;
      top: var(--hdr-h); left: 0; right: 0; bottom: 0;
    }

    /* ─── 좌측 사이드바 메뉴(매물종류/테마종류) ───
       sidebar-menu.css의 #sbm-mount는 position:sticky 기반 일반 문서 흐름을 전제하므로,
       .lp-body의 position:fixed + flex 레이아웃에 맞게 여기서 재정의한다.
       비활성/로딩 전에는 display:none으로 시작해 빈 박스가 잠깐 보이는 걸 막고,
       sidebar-menu.js가 렌더링에 성공하면 display:''로 되돌린다. */
    .lp-body #sbm-mount {
      display: none;
      flex: 0 0 220px;
      width: 220px;
      align-self: stretch;
      overflow-y: auto;
      position: static;
      border-right: 1px solid #e2e8f0;
      background: #fff;
    }

    /* ─── 왼쪽 사이드바 ─── */
    .lp-sidebar {
      width: 400px;
      flex-shrink: 0;
      background: #fff;
      border-right: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 10;
    }
    .lp-sidebar-head {
      padding: 12px 16px;
      border-bottom: 1px solid #f1f5f9;
      background: #f8fafc;
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
      position: sticky; top: 0; z-index: 3;
    }
    .lp-result-count { font-size: 13px; color: #64748b; }
    .lp-result-count strong { color: #1a56db; font-weight: 700; }
    .lp-sort-tabs { display: flex; gap: 4px; }
    .lp-sort-tab {
      padding: 4px 10px; border-radius: 14px;
      font-size: 11px; font-weight: 600; color: #94a3b8;
      border: 1px solid #e2e8f0; background: #fff;
      cursor: pointer; transition: all .15s;
    }
    .lp-sort-tab.active { border-color: #1a56db; color: #1a56db; background: #eff6ff; }
    .lp-sort-tab { display: inline-flex; align-items: center; gap: 3px; }
    .lp-sort-tab .sort-arrow { font-size: 9px; color: #cbd5e1; transition: color .15s; }
    .lp-sort-tab.active .sort-arrow { color: #1a56db; }

    .lp-card-list {
      flex: 1; overflow-y: auto; padding: 10px;
    }
    .lp-card-list::-webkit-scrollbar { width: 5px; }
    .lp-card-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

    /* 무한스크롤 바닥 감지 sentinel(#sidebar-cards 내부 마지막 자식) — 평소엔 관찰용
       여백만 차지하다가, 다 불러오면 안내 문구로 바뀐다. */
    .lp-scroll-status {
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #94a3b8;
      font-size: 12px;
      padding: 8px 0;
    }
    .lp-scroll-status.lp-scroll-end { color: #94a3b8; }

    /* ─── 매물 카드 ───
       카드 본문은 항상 5줄(가격 / 권리금 / 제목 / 메타 / 면적·태그) 고정 슬롯으로 구성된다.
       값이 없는 줄도 높이를 유지해 카드 높이가 매물마다 들쭉날쭉해지지 않게 하고,
       모든 줄은 white-space:nowrap + text-overflow:ellipsis 로 줄바꿈 없이 말줄임 처리한다. */
    .lp-card {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 12px;
      border-radius: 10px;
      border: 1.5px solid #f1f5f9;
      background: #fff;
      cursor: pointer;
      margin-bottom: 8px;
      transition: all .15s;
    }
    .lp-card:hover { border-color: #93c5fd; background: #f0f7ff; box-shadow: 0 2px 10px rgba(26,86,219,.08); }
    .lp-card.active { border-color: #1a56db; background: #eff6ff; }
    .lp-card-img {
      width: 110px !important; height: 90px !important; border-radius: 8px;
      overflow: hidden; flex-shrink: 0; background: #f1f5f9;
    }
    .lp-card-img img { width: 100%; height: 100%; object-fit: cover; }
    .lp-card-img .img-err { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
    .lp-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: flex-start; }
    .lp-card-type { font-size: 10px; font-weight: 700; color: #1a56db; background: #eff6ff; padding: 2px 7px; border-radius: 10px; display: inline-block; margin-bottom: 3px; }
    .lp-card-loc { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
    .lp-card-footer { display: flex; align-items: center; justify-content: space-between; }
    .lp-card-price { font-size: 14px; font-weight: 800; color: #e65c00; }
    .lp-card-price .unit { font-size: 11px; font-weight: 400; color: #94a3b8; margin-left: 2px; }
    .lp-card-detail-btn {
      font-size: 11px; font-weight: 600; color: #fff;
      background: #1a56db; border: none; border-radius: 5px;
      padding: 4px 9px; cursor: pointer; flex-shrink: 0;
      transition: background .15s;
    }
    .lp-card-detail-btn:hover { background: #1545b0; }

    /* 1번째 줄: 가격 (항상 값 있음) */
    .lp-card-price-row {
      display: flex; align-items: center; gap: 5px;
      height: 18px; overflow: hidden; white-space: nowrap;
    }
    .lp-card-price-main {
      font-size: 14px; font-weight: 800; color: #1e293b;
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .lp-card-price-monthly { font-size: 13px; font-weight: 700; color: #e65c00; flex-shrink: 0; white-space: nowrap; }
    .tx-badge { font-size:10px; font-weight:700; padding:1px 5px; border-radius:4px; flex-shrink:0; vertical-align:middle; }
    .tx-sale  { background:#fee2e2; color:#dc2626; }
    .tx-jeon  { background:#dbeafe; color:#1d4ed8; }
    .tx-month { background:#fef9c3; color:#854d0e; }

    /* 2번째 줄: 권리금 (값 없어도 칸 유지) */
    .lp-card-keymoney {
      display: flex; align-items: center; gap: 3px;
      height: 14px; font-size: 11px; font-weight: 700; color: #7c3aed;
      overflow: hidden; white-space: nowrap;
    }
    .km-badge { font-size:10px; background:#d1fae5; color:#059669; padding:1px 5px; border-radius:4px; flex-shrink:0; }
    .km-amount { font-weight:800; color:#059669; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .dp-premium-hl { font-weight:800; color:#059669; background:#d1fae5; padding:1px 6px; border-radius:5px; }

    /* 3번째 줄: 제목 (항상 값 있음) */
    .lp-card-title {
      height: 18px; line-height: 18px;
      font-size: 13px; font-weight: 700; color: #1e293b;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* 4번째 줄: 메타(번호/지역/종류) (항상 값 있음) */
    .lp-card-meta {
      height: 14px; line-height: 14px;
      font-size: 10px; color: #64748b;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* 5번째 줄: 면적·층 + 태그 (한 줄로 통합, 값 없어도 칸 유지) */
    .lp-card-extra {
      height: 14px; line-height: 14px;
      font-size: 10px; color: #64748b;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* ── 사진 아래 배지(모바일): 원형 필이 아니라 서로 붙어 바깥 모서리만 둥근 세그먼트 형태 ── */
    .lp-card-photo-col { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
    .lp-card-under-badges {
      display: none;
      border-radius: 6px; overflow: hidden;
    }
    .lp-card-under-badges .tx-badge,
    .lp-card-under-badges .lp-card-type-badge {
      flex: 1; min-width: 0; margin: 0 !important; border-radius: 0 !important;
    }
    .lp-card-type-badge { font-size: 9px; font-weight: 700; color: #1a56db; background: #eff6ff; padding: 2px 5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* PC: 매물사진 하단왼쪽 오버레이 배지 (거래유형/매물종류) */
    .lp-card-photo-overlay-badges { position:absolute; left:5px; bottom:5px; display:flex; gap:3px; z-index:3; max-width:calc(100% - 10px); }
    .lp-card-photo-overlay-badges .tx-badge.overlay { margin-right:0; font-size:8px; padding:1px 4px; box-shadow:0 1px 4px rgba(0,0,0,.35); letter-spacing:.2px; }
    .lp-card-photo-overlay-badges .lp-card-type-badge.overlay { font-size:7px; padding:1px 4px; background:rgba(255,255,255,.94); color:#1e293b; box-shadow:0 1px 4px rgba(0,0,0,.25); backdrop-filter:blur(2px); }

    /* ─── 매물 카드: index/detail/agent와 완전히 동일한 카드(공용모듈 property-card.js의
       buildPropCard(p,{layout:'horizontal'}))를 그대로 쓴다. 마크업/사진 정사각형 처리·배지·
       가격 표기는 전부 property-card.js/css(.prop-card-h)가 담당하므로 여기서는 사이드바
       특유의 카드 컨테이너 톤(모서리 둥글기, 카드 사이 구분선 등)만 지정한다. ─── */
    .lp-card.lp-card-v2 {
      padding: 0; gap: 0;
      border-radius: 14px;
      overflow: hidden;
    }
    .lp-card.lp-card-v2:hover .prop-card-img img { transform: scale(1.04); }

    /* PC 사이드바 카드(.lp-card-v2) 전용 조정 — property-card.css 원본(그리드용 큰 카드 기준
       수치)과 모바일(≤768px)의 자체 축소 규칙은 그대로 두고, PC 폭(769px~)에서만
       선택자를 좁혀 오버라이드한다. 값은 property-card.css가 이미 쓰던 768px 모바일용
       축소 수치와 동일하게 맞춰 톤을 통일했다. */
    @media (min-width: 769px) {
      .lp-card.lp-card-v2 .prop-badge-top { font-size: 8.5px; padding: 2px 6px; letter-spacing: .1px; }
      .lp-card.lp-card-v2 .prop-badge-ribbon { width: 56px; height: 56px; }
      .lp-card.lp-card-v2 .prop-badge-ribbon-text { font-size: 8px; width: 60px; padding: 3px 0; top: 11px; right: -13px; }
      .lp-card.lp-card-v2 .prop-badge-overlay-text { font-size: 15px; letter-spacing: 2px; }
      .lp-card.lp-card-v2 .prop-badge-bottom { font-size: 8px; font-weight: 600; padding: 2px 5px; border-radius: 4px; gap: 2px; box-shadow: none; }

      /* 금액 텍스트도 같은 이유로 한 단계 축소 (17px → 14px, property-card.css의 768px
         규칙과 동일한 값) */
      .lp-card.lp-card-v2 .prop-card-price { font-size: 14px; }
      .lp-card.lp-card-v2 .prop-card-price .price-badge { font-size: 8.5px; padding: 1px 3px; margin-right: 2px; }
      .lp-card.lp-card-v2 .prop-card-price .price-premium-part { font-size: .68em; margin-left: 4px; }
    }

    /* 가격 앞 거래유형 글자 배지(매/전/보/월) — 상세팝업(dp-price)이 쓰는 공용 헬퍼
       (price-format.js의 buildPriceBadgesHtml) 마크업 전용. 매물카드 안의 것은
       property-card.css(.prop-card-price .price-badge)가 담당하므로 여기와 겹치지 않는다. */
    .price-badge {
      display: inline-block; font-size: 9px; font-weight: 800;
      padding: 1px 4px; border-radius: 4px; margin-right: 3px;
      vertical-align: 1px; line-height: 1.4;
    }
    .price-badge.badge-sale     { color: #dc2626; background: #fee2e2; }
    .price-badge.badge-jeonse   { color: #c2410c; background: #ffedd5; }
    .price-badge.badge-deposit,
    .price-badge.badge-monthly { color: #1a56db; background: #dbeafe; }
    /* 권리금은 매매가/보증금·월세보다 부수 정보이므로 라벨+금액 전체를 한 단계 작게 표시 */
    .price-premium-part { font-size: .74em; font-weight: 700; margin-left: 6px; }
    .price-premium-part .badge-premium { color: #dc2626; background: #fee2e2; }

    /* 빈 결과 */
    .lp-empty { text-align: center; padding: 60px 20px; color: #94a3b8; }
    .lp-empty svg { opacity: .3; margin-bottom: 12px; }
    .lp-empty p { font-size: 14px; }

    /* ─── 지도 영역 ─── */
    .lp-map-area {
      flex: 1;
      position: relative;
      overflow: hidden;
      min-height: 0;        /* flex child 높이 계산 보장 */
    }
    #kakao-map {
      position: absolute;   /* 부모 기준 절대 위치 */
      top: 0; left: 0; right: 0; bottom: 0;
      width: 100%;
      height: 100%;
    }

    /* 지도 위 컨트롤 */
    .lp-map-controls {
      position: absolute; top: 12px; right: 12px; z-index: 100;
      display: flex; flex-direction: column; gap: 4px;
    }
    .lp-map-btn {
      width: 36px; height: 36px;
      background: #fff; border: 1px solid #e2e8f0;
      border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.1);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 16px; font-weight: 700;
      color: #475569; transition: all .15s;
    }
    .lp-map-btn:hover { background: #f0f7ff; border-color: #1a56db; color: #1a56db; }

    /* 선택된 마커 가격 라벨 */
    .lp-marker-label {
      background: #c0392b; color: #fff;
      font-size: 11px; font-weight: 700;
      padding: 4px 9px; border-radius: 14px;
      white-space: nowrap; cursor: pointer;
      box-shadow: 0 2px 8px rgba(192,57,43,.45);
      border: 1.5px solid rgba(255,255,255,.6);
      transform: translateX(-50%);
      display: none;
    }
    .lp-marker-label.show { display: block; }


    /* 리스트 모드 숨김/표시 */
    .lp-sidebar { display: flex; }
    .lp-map-area { display: flex; }

    body.mode-map .lp-sidebar { display: flex; }
    body.mode-map .lp-map-area { display: flex; }

    /* 인포윈도우 스타일 재정의 */
    .lp-infobox {
      font-family: 'Noto Sans KR', sans-serif;
      width: 210px; padding: 12px;
      background: #fff; border-radius: 10px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 6px 20px rgba(0,0,0,.15);
    }
    .lp-infobox-title { font-size: 12px; font-weight: 700; color: #1e293b; margin-bottom: 3px; }
    .lp-infobox-loc { font-size: 11px; color: #94a3b8; margin-bottom: 6px; }
    .lp-infobox-price { font-size: 15px; font-weight: 800; color: #e65c00; margin-bottom: 8px; }
    .lp-infobox-btn {
      display: block; width: 100%; padding: 7px 0;
      background: #1a56db; color: #fff; text-align: center;
      border: none; border-radius: 6px; font-size: 12px; font-weight: 600;
      cursor: pointer;
    }
    .lp-infobox-btn:hover { background: #1545b0; }

    /* 로딩 스피너 */
    .lp-loading {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      color: #94a3b8; font-size: 13px;
    }
    .lp-spinner {
      width: 28px; height: 28px; border: 3px solid #e2e8f0;
      border-top-color: #1a56db; border-radius: 50%;
      animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* 페이지네이션 */
    .lp-pagination { display: flex; justify-content: center; gap: 6px; margin: 24px 0; flex-wrap: wrap; }
    .lp-page-btn { width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: #fff; color: #475569; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
    .lp-page-btn:hover { border-color: #1a56db; color: #1a56db; }
    .lp-page-btn.active { background: #1a56db; border-color: #1a56db; color: #fff; }

    @media (max-width: 768px) {
      :root { --hdr-h: 96px; } /* 기본(검색행 접힘) 2행 헤더 높이 — JS(syncHeaderHeight)가 실제 높이로 재보정함 */
      .lp-nav-links { display: none; }

      /* ── 헤더 구성 (1행: 로고 + 지도/목록 전환 + 로그인 / 2행: 검색창 / 3행: 필터 칩)
         검색창·필터 칩은 항상 보이며, 매물목록 스크롤에 따라 함께 접힘/펼침 */
      .lp-nav {
        height: auto; min-height: 56px;
        flex-wrap: wrap; align-items: center;
        padding: 8px 10px; gap: 8px;
        overflow: visible;
      }
      .lp-logo { order: 1; font-size: 15px; flex-shrink: 0; margin-right: 2px; }
      .lp-nav-actions { order: 2; flex-shrink: 0; margin-left: auto; }
      .lp-view-toggle, .lp-btn-sm { flex-shrink: 0; }
      .lp-vbtn { padding: 6px 10px; font-size: 11px; }

      /* 2행: 검색창 + 검색/초기화 아이콘 버튼 — 항상 표시, 목록 스크롤에 따라 필터행과 함께 접힘 */
      .lp-search-row {
        display: flex; order: 3; flex: 1 0 100%;
        align-items: center; gap: 6px;
      }
      .lp-search-wrap { flex: 1 1 auto; max-width: none; min-width: 0; }
      .lp-search-wrap input { font-size: 16px; } /* iOS 자동 확대 방지 */
      .lp-icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; flex-shrink: 0; padding: 0;
        border: 1.5px solid #d0d8f0; background: #f1f5fd; border-radius: 8px;
        color: #64748b; cursor: pointer;
      }
      .lp-search-exec-btn { color: #1a56db; border-color: #93c5fd; background: #eff6ff; }

      /* 3행: 필터 칩 — 화면 가로폭에 꽉 차게 (기존 텍스트형 초기화 버튼은 위 아이콘으로 대체) */
      /* 캡슐(.sf-dd-group)과 버튼 크기/가로채움은 search-filters.css 쪽
         .sf-dd-group 규칙(모바일 미디어쿼리)이 담당 — 가로 스크롤 대신
         화면폭에 꽉 차게 flex:1로 분배한다. */
      /* 2026-08-30: min-width:0 추가 — 필터 선택 후 버튼 라벨이 선택값으로 바뀌면서
         길어지면(예: "서울특별시 강남구 ▾", "아파트,오피스텔 ▾") flex 아이템 기본값인
         min-width:auto 때문에 내용물 최소폭이 flex-basis(100%)를 넘어서 이 그룹
         전체가 화면 밖으로 늘어나는 문제가 있었다(사용자 요청 — "선택하더라도 탭이
         커지거나 늘어나지 말고 크기 고정"). min-width:0으로 이 자동 최소폭 계산을
         꺼서 항상 지정한 폭(100%) 안에서만 자식들이 나눠 갖고, 넘치는 텍스트는
         search-filters.css의 ellipsis가 처리하게 한다. */
      .lp-filter-group {
        order: 4; flex: 1 0 100%; min-width: 0;
        flex-wrap: nowrap; gap: 6px;
      }
      /* 2026-08-29(10차, 버그수정): 아래 셀렉터를 그냥 .lp-filt-reset-icon 하나만 쓰면
         search-filters.css가 이 파일보다 나중에 로드되면서 거기 있는(미디어쿼리 없이 항상
         적용되는) 동일 클래스 규칙(display:flex)에게 우선순위(둘 다 클래스 1개라 로드순서로
         결정됨) 문제로 덮여씌워져, 모바일에서 상단 검색행 초기화 아이콘과 이 아이콘이
         둘 다 보이는(중복) 버그가 있었다(실사용자 보고). 부모(.lp-filter-group)까지 셀렉터에
         포함해 우선순위를 올렸고(실제 Chromium으로 재현 검증 완료), 그래도 계속 같은
         증상이 재보고돼 !important까지 추가로 얹어 로드순서/특이성 논쟁 자체를 원천
         차단한다 — 남은 원인은 거의 확실히 브라우저 캐시(파일 해시는 바뀌었지만 이전
         list.html/CSS 응답이 캐시된 상태)로 보인다. */
      .lp-filter-group .lp-filt-reset-icon { display: none !important; }

      /* 2026-08-29(12차): 캡슐 두 개(지역·매물종류·거래유형 3개 / 금액·면적 2개)를
         똑같이 flex:1(=폭 50:50)로 나누면, 3개짜리 캡슐 안의 탭 하나하나가 2개짜리
         캡슐의 탭보다 훨씬 좁아져 탭 크기가 들쭉날쭉해 보였다(사용자 요청 — "탭 정렬").
         탭 개수(3:2)에 비례하게 캡슐 자체의 flex 비율을 나눠서, 결과적으로 탭 하나당
         폭이 두 캡슐에서 똑같아지도록 맞춘다. */
      .lp-filter-group > .sf-dd-group:nth-of-type(1) { flex: 3; }
      .lp-filter-group > .sf-dd-group:nth-of-type(2) { flex: 2; }

      /* ── 지도/리스트: 위 지도(고정 55%), 아래 매물 목록(고정 45%) — 서로 겹치지 않음.
         (기존엔 지도를 화면 전체 크기로 깔고 시트를 그 위에 translateY로 겹쳐서 가리는 방식이었는데,
          그러면 "가려진 영역"이 생겨서 지도 중심 좌표가 실제 보이는 영역과 어긋나 보이는 문제가 있었음.
          지도가 항상 자기 실제 크기(55%) 그대로만 렌더링되면 그 문제 자체가 발생할 수 없음) ── */
      .lp-sidebar {
        width: 100%; position: absolute; left: 0; right: 0;
        top: 55%; bottom: 0;
        border-right: none; border-top: 1px solid #e2e8f0;
        border-radius: 16px 16px 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,.1);
        transition: top .28s cubic-bezier(.4,0,.2,1), border-radius .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1);
      }
      .lp-map-area {
        position: absolute; top: 0; left: 0; right: 0;
        height: 55%;
        overflow: hidden;
        transition: height .28s cubic-bezier(.4,0,.2,1), opacity .18s ease;
      }
      /* 리사이즈(높이 변화) 도중엔 카카오맵 캔버스가 아직 relayout되지 않아
         타일이 늘어나 보이는 순간이 생김 — 그 구간을 살짝 페이드로 가려서
         "버벅거려 보이는" 느낌을 줄인다. relayout이 끝난 뒤(JS에서) 이 클래스를
         제거하면 다시 자연스럽게 나타난다. */
      .lp-map-area.lp-map-fade { opacity: 0; }

      /* 상세팝업을 열 때 헤더를 "즉시" 접기 위한 트랜지션 무효화용 —
         트랜지션이 걸린 채로 접으면 그 순간 offsetHeight를 측정해도
         아직 줄어들기 전(옛) 값이 잡혀서 --hdr-h가 실제보다 커지고,
         그 차이만큼 헤더와 팝업 사이에 빈 공간(지도가 있던 자리)이 남는다. */
      .lp-header.lp-instant, .lp-header.lp-instant * { transition: none !important; }

      /* ── 매물목록 스크롤 연동 접힘: 목록을 아래로 스크롤하면 검색/필터가 접히고
         지도 영역은 높이 0으로 접혀 사라짐(목록이 화면 전체 차지). 목록을 맨 위(첫 매물)까지
         스크롤하면 원복. 지도 크기가 고정이라 "부분적으로 가려짐" 없이 항상 보이거나(55%) 안 보이거나(0%) 둘 중 하나 ── */
      .lp-filter-group, .lp-search-row {
        transition: max-height .28s cubic-bezier(.4,0,.2,1), opacity .18s ease;
        max-height: 44px;
      }
      .lp-nav.scroll-collapsed .lp-filter-group,
      .lp-nav.scroll-collapsed .lp-search-row {
        max-height: 0 !important;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        margin: 0 !important;
      }
      body.lp-map-collapsed .lp-map-area { height: 0; }
      body.lp-map-collapsed .lp-sidebar {
        top: 0;
        border-radius: 0; border-top: none; box-shadow: none;
      }

      /* 매물카드 리스트: 좌우 여백 없이 화면 꽉 차게 (위아래 여백은 유지) */
      .lp-card-list { padding: 10px 0; }

      .lp-sidebar-head { padding: 10px 14px; }
      .lp-result-count { font-size: 12px; }
      .lp-sort-tabs { gap: 3px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      .lp-sort-tabs::-webkit-scrollbar { display: none; }
      .lp-sort-tab { flex-shrink: 0; padding: 4px 9px; font-size: 10.5px; }

      /* ── 카드: 에이전트(agent) 모바일 카드 스타일 참고해 리디자인 ──
         사진 4번째 줄(가격~메타)과, 배지는 5번째 줄(면적·태그)과 아래쪽 높이를 맞춘다.
         본문 줄 높이: 가격18 · 권리금14 · 제목18 · 메타14 · 면적14, 줄 간격 2px
         → 사진 높이 = 18+14+18+14 + 3*2 = 70px, 배지 높이 = 14px (사진과 2px 간격) */
      .lp-card {
        padding: 10px; gap: 10px;
        border-radius: 14px;
        box-shadow: 0 1px 5px rgba(0,0,0,.05);
      }
      .lp-card:active { background: #f8fafc; }
      .lp-card-img {
        width: 100px !important; height: 70px !important;
        border-radius: 11px;
      }

      /* v2 카드(list.js가 실제로 그리는 카드, agent.html 모바일 카드와 동일 톤으로 통일):
         완전 풀블리드 — 카드 사이 여백/그림자/radius 제거하고 얇은 구분선으로만 분리 */
      .lp-card.lp-card-v2 {
        padding: 0; gap: 0;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 0;
        border: none;
        border-bottom: 1px solid #f1f5f9;
      }
      .lp-card.lp-card-v2:active { background: #f8fafc; }
      .lp-card-body { gap: 2px !important; }
      .lp-card-price-row { height: 18px; }
      .lp-card-price-main { font-size: 14px; font-weight: 800; }
      .lp-card-keymoney { height: 14px; }
      .lp-card-title { height: 18px; line-height: 18px; font-size: 13px; }
      .lp-card-meta { height: 14px; line-height: 14px; font-size: 10.5px; }
      .lp-card-extra { height: 14px; line-height: 14px; font-size: 10.5px; }

      /* 거래유형 배지 — 필(pill) 형태 */
      .tx-badge {
        border-radius: 20px !important;
        padding: 2px 8px !important;
        font-weight: 800 !important;
      }

      /* ── 매물사진 바로 아래: 거래구분/매물종류 배지 (폰 전용) —
         원형(필)이 아니라 서로 붙여서 바깥 모서리만 둥근 세그먼트 형태로 통일,
         사진과 2px 간격을 두어 5번째 줄(면적·태그) 아래 라인과 정확히 맞춘다 ── */
      .lp-card-photo-col { gap: 2px; }
      .lp-card-under-badges {
        display: flex; flex-direction: row;
        width: 100px; height: 14px;
        border-radius: 7px;
      }
      .lp-card-under-badges .tx-badge,
      .lp-card-under-badges .lp-card-type-badge {
        display: flex; align-items: center; justify-content: center;
        padding: 0 !important;
        font-size: 9px !important; font-weight: 800; letter-spacing: .1px;
      }
      .lp-card-under-badges .lp-card-type-badge {
        background: #f1f5f9; color: #64748b; font-weight: 700;
      }
      /* PC 전용 사진 오버레이 배지는 폰에서 숨김 (하단 배지로 대체) */
      .lp-card-photo-overlay-badges { display: none !important; }

      /* 카드 v2 사진/배지 크기는 이제 property-card.css(.prop-card-h .prop-card-img,
         @media 768px → 116px, 배지도 같은 파일의 .prop-badge-*)가 담당 — 여기서 따로 지정하지 않는다. */

      body.lp-map-collapsed .lp-map-controls { display: none; }

      /* 모바일 #detail-panel 전체화면 레이아웃은 기본 #detail-panel 규칙 뒤(아래)에서 재적용함 */
    }

    @media (max-width: 480px) {
      .lp-logo { font-size: 13px; }
      .lp-logo img { width: 32px !important; height: 32px !important; }

      .lp-sidebar { top: 54%; }
      .lp-map-area { height: 54%; }
      body.lp-map-collapsed .lp-sidebar { top: 0; }
      body.lp-map-collapsed .lp-map-area { height: 0; }

      /* 본문 줄 높이: 가격16 · 권리금12 · 제목16 · 메타12 · 면적12, 줄 간격 2px
         → 사진 높이 = 16+12+16+12 + 3*2 = 62px, 배지 높이 = 12px (사진과 2px 간격) */
      .lp-card { padding: 9px; gap: 8px; border-radius: 13px; }
      .lp-card-img { width: 84px !important; height: 62px !important; border-radius: 10px; }
      .lp-card-body { gap: 2px !important; }
      .lp-card-price-row { height: 16px; }
      .lp-card-price-main { font-size: 13px !important; }
      .lp-card-keymoney { height: 12px; font-size: 10px; }
      .lp-card-title { height: 16px; line-height: 16px; font-size: 12px !important; }
      .lp-card-meta { height: 12px; line-height: 12px; font-size: 9.5px; }
      .lp-card-extra { height: 12px; line-height: 12px; font-size: 9.5px; }
      .lp-card-detail-btn { padding: 4px 7px; font-size: 10px; }

      /* 카드 v2 사진 폭은 property-card.css(.prop-card-h .prop-card-img, @media 480px → 92px)가 담당 */

      .lp-card-under-badges { width: 84px; height: 12px; border-radius: 6px; }
      .lp-card-under-badges .tx-badge,
      .lp-card-under-badges .lp-card-type-badge { font-size: 8px !important; }
    }

    /* ─── 상세 슬라이드 패널 ─── */
    #detail-panel {
      position: fixed;
      top: var(--hdr-h); left: 400px; bottom: 0;
      width: 360px;
      background: #fff;
      border-right: 1px solid #e2e8f0;
      box-shadow: 4px 0 24px rgba(0,0,0,.18);
      z-index: 800;
      flex-direction: column;
      overflow: hidden;
      display: none;
    }
    #detail-panel.open {
      display: flex;
    }
    /* 위 768px 미디어쿼리가 이 기본 규칙보다 소스상 먼저 나와 같은 우선순위에서 덮어써지므로,
       모바일 전체화면 레이아웃을 여기서 다시 한 번 적용해 확실히 이기도록 함 */
    @media (max-width: 768px) {
      #detail-panel { left: 0; width: 100%; top: var(--hdr-h); }
    }

    /* 폰 전용: 상세패널 하단 우측 고정 간편상담문의 버튼 */
    #dp-mobile-consult-btn {
      display: none;
    }
    @media (max-width: 768px) {
      #dp-mobile-consult-btn {
        display: flex; align-items: center; gap: 6px;
        position: absolute;
        right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 60;
        padding: 11px 18px 11px 15px;
        border: none; border-radius: 999px;
        background: linear-gradient(135deg, #2563eb, #1a56db);
        color: #fff; font-size: 13px; font-weight: 800;
        font-family: 'Noto Sans KR', sans-serif;
        box-shadow: 0 6px 18px rgba(26,86,219,.45), 0 2px 6px rgba(0,0,0,.15);
        cursor: pointer;
        animation: dpConsultFloat 2.6s ease-in-out infinite;
        transition: transform .15s, box-shadow .15s;
      }
      #dp-mobile-consult-btn:active {
        transform: scale(.94);
        box-shadow: 0 3px 10px rgba(26,86,219,.4);
      }
    }
    @keyframes dpConsultFloat {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }
    #dp-mobile-consult-btn:active { animation-play-state: paused; }

    /* ─── 간편상담문의 미니 팝업 (상세패널 오른쪽 바깥) ─── */
    #quick-consult-popup {
      position: fixed;
      top: var(--hdr-h);
      width: 190px;
      background: #fff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      box-shadow: 3px 4px 18px rgba(0,0,0,.14);
      z-index: 810;
      overflow: hidden;
      display: none;
    }
    #quick-consult-popup.show { display: block; }
    #quick-consult-popup .qc-head {
      display: flex; align-items: center; justify-content: space-between; gap: 6px;
      padding: 8px 10px; background: #eff6ff; border-bottom: 1px solid #dbeafe;
    }
    #quick-consult-popup .qc-head-right {
      display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    }
    #quick-consult-popup .qc-title {
      font-size: 12px; font-weight: 800; color: #1a56db;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1;
    }
    #quick-consult-popup .qc-close {
      width: 18px; height: 18px; border: none; background: transparent;
      color: #64748b; font-size: 13px; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center; border-radius: 4px;
    }
    #quick-consult-popup .qc-close:hover { background: #dbeafe; color: #1a56db; }
    #quick-consult-popup .qc-body { padding: 9px 10px 10px; }
    #quick-consult-popup { color-scheme: light; }
    #quick-consult-popup .qc-input {
      width: 100%; box-sizing: border-box; font-size: 11.5px; padding: 6px 8px;
      border: 1px solid #e2e8f0; border-radius: 7px; margin-bottom: 6px; outline: none;
      background: #fff; color: #1e293b; -webkit-text-fill-color: #1e293b; caret-color: #1e293b;
    }
    #quick-consult-popup .qc-input::placeholder { color: #94a3b8; opacity: 1; }
    #quick-consult-popup .qc-input:focus { border-color: #93c5fd; }
    #quick-consult-popup textarea.qc-input { resize: none; height: 46px; font-family: inherit; }
    #quick-consult-popup .qc-agree-row {
      display: flex; align-items: center; justify-content: space-between; gap: 6px;
      border: 1px solid #e2e8f0; border-radius: 7px; padding: 6px 7px; margin-bottom: 7px;
    }
    #quick-consult-popup .qc-agree-label {
      display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: #334155;
      cursor: pointer; white-space: nowrap;
    }
    #quick-consult-popup .qc-agree-label input { width: 12px; height: 12px; flex-shrink: 0; cursor: pointer; }
    #quick-consult-popup .qc-terms-btn {
      flex-shrink: 0; font-size: 10px; font-weight: 600; color: #475569; background: #f1f5f9;
      border: 1px solid #e2e8f0; border-radius: 5px; padding: 3px 7px; cursor: pointer; white-space: nowrap;
    }
    #quick-consult-popup .qc-terms-btn:hover { background: #e2e8f0; }
    #quick-consult-popup .qc-submit {
      width: 100%; padding: 9px 0; border: none; border-radius: 7px;
      background: #1e293b; color: #fff; font-size: 12.5px; font-weight: 800; cursor: pointer;
    }
    #quick-consult-popup .qc-submit:hover { background: #0f172a; }
    #quick-consult-popup .qc-dontshow-label {
      display: flex; align-items: center; gap: 3px; font-size: 9.5px; color: #94a3b8;
      cursor: pointer; white-space: nowrap; flex-shrink: 0;
    }
    #quick-consult-popup .qc-dontshow-label input { width: 10px; height: 10px; cursor: pointer; }
    /* 데스크톱-우측부착 방식이 통하지 않는 태블릿 구간은 숨김 */
    @media (max-width: 1180px) and (min-width: 769px) {
      #quick-consult-popup { display: none !important; }
    }
    /* 모바일: 화면 하단에 고정된 카드 형태로 최적화 */
    @media (max-width: 768px) {
      #quick-consult-popup {
        left: 8px !important; right: 8px !important;
        top: auto !important; bottom: 10px !important;
        width: auto !important; max-width: none;
      }
      #quick-consult-popup .qc-title { font-size: 13px; }
      #quick-consult-popup .qc-body { padding: 10px 12px 12px; }
      #quick-consult-popup .qc-input { font-size: 14px; padding: 9px 10px; margin-bottom: 8px; }
      #quick-consult-popup textarea.qc-input { height: 54px; }
      #quick-consult-popup .qc-agree-row { padding: 8px 9px; }
      #quick-consult-popup .qc-agree-label { font-size: 12px; }
      #quick-consult-popup .qc-terms-btn { font-size: 11px; padding: 4px 8px; }
      #quick-consult-popup .qc-submit { padding: 11px 0; font-size: 14px; }
      #quick-consult-popup .qc-dontshow-label { font-size: 10.5px; }
    }

    /* ─── 간편상담문의 약관 모달 ─── */
    #qc-terms-modal {
      display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45);
      z-index: 900; align-items: center; justify-content: center;
    }
    #qc-terms-modal.show { display: flex; }
    #qc-terms-modal .qc-terms-box {
      background: #fff; width: 300px; max-height: 65vh; border-radius: 12px;
      padding: 16px; display: flex; flex-direction: column;
    }
    #qc-terms-modal .qc-terms-head {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-shrink: 0;
    }
    #qc-terms-modal .qc-terms-title { font-size: 13px; font-weight: 800; color: #1e293b; }
    #qc-terms-modal .qc-terms-x {
      border: none; background: none; font-size: 15px; color: #94a3b8; cursor: pointer; line-height: 1;
    }
    #qc-terms-modal .qc-terms-body {
      font-size: 11px; color: #475569; line-height: 1.65; overflow-y: auto; white-space: pre-line;
    }
    #qc-terms-modal .qc-terms-ok {
      margin-top: 12px; flex-shrink: 0; width: 100%; padding: 9px 0; border: none; border-radius: 8px;
      background: #1a56db; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
    }
    /* ─── 팝업 정보 행 (인라인 편집) ─── */
    .dp-row {
      display: flex; align-items: center;
      padding: 5px 0; border-bottom: 1px solid #f8fafc;
      gap: 6px;
    }
    .dp-row:last-child { border-bottom: none; }
    .dp-row-label {
      flex-shrink: 0; width: 84px;
      font-size: 11px; font-weight: 600; color: #94a3b8;
    }
    .dp-row-val {
      flex: 1; font-size: 12px; font-weight: 600; color: #1e293b;
      word-break: break-all; min-width: 0;
    }
    /* 편집 모드 */
    .dp-edit-btn {
      width: 22px; height: 22px; border: none; background: transparent;
      color: #cbd5e1; cursor: pointer; border-radius: 4px;
      font-size: 13px; display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: all .15s; padding: 0;
    }
    .dp-edit-btn:hover { background: #f1f5f9; color: #1a56db; }
    .dp-row:hover .dp-edit-btn { color: #94a3b8; }
    .dp-edit-input {
      flex: 1; font-size: 12px; font-weight: 600; color: #1e293b;
      border: 1.5px solid #1a56db; border-radius: 5px;
      padding: 3px 7px; outline: none; background: #f8fbff;
      min-width: 0;
    }
    .dp-save-btn {
      font-size: 11px; font-weight: 700; color: #fff;
      background: #1a56db; border: none; border-radius: 4px;
      padding: 3px 8px; cursor: pointer; flex-shrink: 0; white-space: nowrap;
    }
    .dp-cancel-btn {
      font-size: 11px; color: #94a3b8; background: #f1f5f9;
      border: none; border-radius: 4px; padding: 3px 7px; cursor: pointer; flex-shrink: 0;
    }
    /* 전체 저장 바 */
    #dp-save-bar {
      display: none; padding: 10px 14px;
      background: #eff6ff; border-top: 1px solid #bfdbfe;
      flex-shrink: 0;
    }
    #dp-save-bar.show { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    #dp-save-bar span { font-size: 12px; color: #1a56db; font-weight: 600; }
    #dp-save-bar button { font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: 6px; cursor: pointer; border: none; }
    .dp-btn-save-all { background: #1a56db; color: #fff; }
    .dp-btn-cancel-all { background: #f1f5f9; color: #64748b; }
    /* 편집 토글 버튼 */
    #dp-edit-toggle {
      font-size: 11px; font-weight: 600; color: #64748b;
      background: #f1f5f9; border: 1px solid #e2e8f0;
      border-radius: 5px; padding: 4px 10px; cursor: pointer;
      white-space: nowrap;
    }
    #dp-edit-toggle.editing { background: #fef3c7; color: #92400e; border-color: #fde68a; }

/* Material Symbols 아이콘 폰트 렌더링 (매물 옵션) */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}