*, *::before, *::after { box-sizing: border-box; }
    html { overflow-x: hidden; }
    body { background: #f8fafc; font-family: 'Noto Sans KR', sans-serif; color: #1e293b; margin: 0; overflow-x: hidden; }

    .bc-bar { background: #fff; border-bottom: 1px solid #f1f5f9; padding: 10px 0; }
    .bc-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #94a3b8; }
    .bc-inner a { color: #64748b; text-decoration: none; } .bc-inner a:hover { color: #c0392b; }
    .bc-inner span { color: #1e293b; font-weight: 600; }

    /* ── 메인 레이아웃 ── */
    .dp-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }

    /* ── 갤러리 ── */
    .gallery-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,.07); }
    .gallery-main-wrap { position: relative; height: 440px; background: #e2e8f0; overflow: hidden; }
    .gallery-main-wrap img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
    .gallery-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 72px; background: linear-gradient(135deg,#e2e8f0,#f1f5f9); }
    /* ⚠ 기본값을 display:none으로 둔다 — mdetail.css와 동일 이유: 예전엔 flex(항상 보임)가
       기본이라 renderPropertyDetails()가 사진 1장뿐인 매물에 뒤늦게 display:none을 걸기 전까지
       버튼이 잠깐 보였다 사라지는 깜빡임이 있었음. 사진 2장 이상일 때만 JS가 명시적으로
       flex로 켜준다(detail.js: multiImg 분기). */
    .gal-nav { position: absolute; top: 50%; transform: translateY(-50%); display: none; width: 40px; height: 40px; background: rgba(255,255,255,.9); border: none; border-radius: 50%; cursor: pointer; font-size: 16px; font-weight: 700; color: #374151; box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: all .15s; align-items: center; justify-content: center; }
    .gal-nav:hover { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
    .gal-prev { left: 12px; } .gal-next { right: 12px; }
    .gal-counter { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
    .gal-badge-layer { position: absolute; inset: 0; pointer-events: none; }
    .gallery-thumbs { display: flex; gap: 8px; padding: 12px; overflow-x: auto; scrollbar-width: none; }
    .gallery-thumbs::-webkit-scrollbar { display: none; }

    /* 🎬 동영상 소개 — 위치/지도 옆 "동영상" 탭 안에서 노출, 클릭하면 그 자리에서 nocookie 임베드로 교체(lazy) */
    #tab-video .detail-video-wrap { border-radius: 12px; overflow: hidden; }
    .detail-video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #0f172a; cursor: pointer; }
    .detail-video-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .detail-video-play-badge {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 64px; height: 64px; border-radius: 50%; background: rgba(15,23,42,.6); color: #fff;
      display: flex; align-items: center; justify-content: center; font-size: 26px; pointer-events: none;
    }
    .detail-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .g-thumb { width: 72px; height: 54px; border-radius: 8px; overflow: hidden; flex-shrink: 0; cursor: pointer; border: 2px solid transparent; transition: border-color .15s; }
    .g-thumb.active { border-color: #c0392b; }
    .g-thumb img { width: 100%; height: 100%; object-fit: cover; }

    /* 갤러리 안 동영상 슬라이드 — 사진 썸네일과 나란히 넘기다가 나오는 동영상 진입점.
       위 "🎬 동영상" 탭과는 별개(둘 다 유지) — 같은 영상을 여기서도 재생 가능. */
    .g-thumb-video { position: relative; }
    .g-thumb-play {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 22px; height: 22px; border-radius: 50%; background: rgba(15,23,42,.65); color: #fff;
      display: flex; align-items: center; justify-content: center; font-size: 10px; pointer-events: none;
    }
    .gal-video-play-badge {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 64px; height: 64px; border-radius: 50%; background: rgba(15,23,42,.6); color: #fff;
      align-items: center; justify-content: center; font-size: 26px; cursor: pointer; z-index: 4;
    }

    /* ── 정보 카드 ── */
    .info-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 1px 8px rgba(0,0,0,.07); margin-top: 16px; }
    .info-card + .info-card { margin-top: 16px; }

    /* 타입 배지 + 타이틀 */
    .type-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
    .prop-type-pill { background: #fef2f2; color: #c0392b; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
    .prop-tx-pill { background: #eafaf1; color: #1e8a5f; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
    .prop-id-badge {
      background: #eff6ff; font-size: 11px; font-weight: 700;
      padding: 4px 11px; border-radius: 20px; white-space: nowrap;
      border: 1px solid #dbeafe;
      display: inline-flex; align-items: baseline; gap: 4px;
    }
    .prop-id-badge .id-label { color: #7b93b8; font-weight: 600; }
    .prop-id-badge .id-num { color: #1a56db; font-weight: 800; }
    /* ㎡/평 단위 토글 — 건물·토지 상세정보가 펼쳐졌을 때 그 제목 옆에 노출 (파스텔 블루 계통) */
    .area-unit-toggle {
      display: flex; align-items: center; flex-shrink: 0;
      border: 1.5px solid #dbe7f5; border-radius: 8px; overflow: hidden; background: #f2f7fc;
    }
    .area-unit-btn {
      border: none; background: transparent; color: #5a86ad; font-size: 12px; font-weight: 700;
      padding: 4px 11px; cursor: pointer; transition: background .15s, color .15s;
    }
    .area-unit-btn + .area-unit-btn { border-left: 1px solid #dbe7f5; }
    .area-unit-btn.active { background: #cfe3f2; color: #336187; }
    .area-unit-btn:hover:not(.active) { background: #e3edf6; }
    .prop-title { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.35; margin: 0 0 8px; }
    .prop-location { font-size: 14px; color: #64748b; display: flex; align-items: center; gap: 4px; margin-bottom: 16px; }

    /* 가격 */
    .price-box { background: linear-gradient(135deg, #fef2f2, #fff5f5); border: 1.5px solid #fecaca; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
    .price-label { font-size: 12px; font-weight: 600; color: #94a3b8; margin-bottom: 4px; }
    .price-main { font-size: 28px; font-weight: 900; color: #c0392b; line-height: 1.2; }
    /* 가격 앞 거래유형 배지(매/전/보/월) + 권리금(권) — list.js/agent.js 카드와 동일 색상 체계 */
    .price-main .price-badge {
      display: inline-block; font-size: 13px; font-weight: 800;
      padding: 2px 7px; border-radius: 5px; margin-right: 6px;
      vertical-align: 2px; line-height: 1.4;
    }
    .price-main .price-badge.badge-sale     { color: #dc2626; background: #fee2e2; }
    .price-main .price-badge.badge-jeonse   { color: #c2410c; background: #ffedd5; }
    .price-main .price-badge.badge-deposit,
    .price-main .price-badge.badge-monthly { color: #1a56db; background: #dbeafe; }
    .price-main .price-premium-part { font-size: .5em; font-weight: 700; margin-left: 8px; }
    .price-main .price-premium-part .badge-premium { color: #dc2626; background: #fee2e2; }
    .price-sub { font-size: 12px; color: #94a3b8; margin-top: 6px; }
    .price-extra { font-size: 13px; font-weight: 600; color: #94a3b8; margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }

    /* 탭 — 매물정보/위치·지도 2버튼 세그먼트 토글. 연한 파스텔 활성 배경 + 진한 남색 텍스트로 대비 확보.
       버튼 자체에 직접 배경을 칠하고(!important로 다른 곳의 .active 전역 스타일과 충돌 방지),
       기존에 쓰던 별도 슬라이딩 인디케이터(span)는 이중 배경 버그의 원인이라 비활성화한다. */
    .tab-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
    .tab-nav {
      position: relative; display: inline-flex; gap: 4px;
      border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;
      width: fit-content; max-width: 100%;
      background: #f4f8fc;
      padding: 5px;
    }
    /* 예전 슬라이딩 배경용 span. 이중 파란 배경 버그의 원인이라 표시하지 않는다(JS는 그대로 두어도 무해함). */
    .tab-nav-indicator { display: none !important; }
    .tab-btn {
      position: relative; z-index: 1; padding: 9px 20px; font-size: 14px; font-weight: 600;
      color: #64748b !important; background: transparent !important; background-image: none !important;
      border: none !important; box-shadow: none !important; border-radius: 12px;
      cursor: pointer; transition: background-color .18s, color .18s; white-space: nowrap; font-family: inherit;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    }
    .tab-btn + .tab-btn { border-left: none !important; }
    .tab-btn:hover { color: #1e3a5f !important; }
    .tab-btn.active {
      background: #cfe3f5 !important; background-image: none !important;
      color: #1e3a5f !important; font-weight: 700; box-shadow: none !important; border: none !important;
    }
    .tab-pane { display: none; } .tab-pane.active { display: block; }
    .tab-btn-icon { font-size: 16px; line-height: 1; }

    /* 스펙 테이블 (상세정보 탭 등, 기존 유지) */
    .spec-table { width: 100%; border-collapse: collapse; }
    .spec-table tr:not(:last-child) td { border-bottom: 1px solid #f8fafc; }
    .spec-table td { padding: 10px 0; font-size: 14px; vertical-align: top; }
    .spec-table td:first-child { color: #64748b; font-weight: 600; width: 110px; flex-shrink: 0; }
    .spec-table td:last-child { color: #1e293b; font-weight: 500; }

    /* 스펙 그리드 (매물정보 탭) — PC 2열, 모바일(900px 이하) 1열의 표(table) 형태.
       table 태그 대신 grid를 쓰는 이유: table은 좁은 화면에서 셀 너비가 눌리며 글자가
       찌그러지기 쉬운데, grid는 컬럼 수를 미디어쿼리로 유연하게 바꿀 수 있다. */
    .spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
    .spec-row { display: flex; flex-direction: row; align-items: baseline; gap: 8px; padding: 14px 2px; border-bottom: 1px solid #eef1f5; min-width: 0; }
    .spec-row--full { grid-column: 1 / -1; }
    .spec-label { flex-shrink: 0; width: 112px; font-size: 12.5px; font-weight: 700; color: #64748b; }
    .spec-value { font-size: 14px; font-weight: 500; color: #1e293b; word-break: break-word; }

    /* 건물/토지 상세정보 — 접기/펼치기 */
    .spec-detail-toggle { margin-top: 20px; padding-top: 16px; border-top: 1px solid #f1f5f9; }
    .spec-detail-summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; color: #0f172a; padding: 4px 0; user-select: none; }
    .spec-detail-summary::-webkit-details-marker { display: none; }
    .spec-detail-summary::marker { content: ''; }
    .spec-detail-hint { font-size: 11.5px; font-weight: 500; color: #94a3b8; margin-left: 6px; }
    .spec-detail-toggle[open] .spec-detail-hint { display: none; }
    /* 탭하여 상세정보 보기 문구가 사라지는 자리에, 펼쳤을 때만 ㎡/평 토글이 나타난다 (표시여부는 JS에서 제어) */
    .spec-detail-summary-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .spec-detail-chevron { font-size: 13px; color: #94a3b8; transition: transform .2s; }
    .spec-detail-toggle[open] .spec-detail-chevron { transform: rotate(180deg); }
    .spec-detail-body { padding-top: 8px; }
    .spec-detail-group-title { font-size: 12px; font-weight: 700; color: #c0392b; letter-spacing: .3px; margin: 16px 0 4px; }
    .spec-detail-group-title:first-child { margin-top: 4px; }


    /* 설명 — spec-value(14px/500)와 같은 스타일을 그대로 썼더니 긴 설명글이 흐릿해 보이던 문제 —
       글자를 키우고(15px) 더 진하게(700) 만들어 잘 읽히게 한다. */
    .desc-card { margin-top: 20px; padding: 18px 18px 16px; border-radius: 12px; background: #f8fafc; border: 1px solid #eef1f5; }
    .desc-card-title { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 10px; }
    .desc-text { font-size: 15px; font-weight: 700; line-height: 1.85; color: #0f172a; white-space: pre-wrap; word-break: break-all; }

    /* 중개사무소 정보 카드 — 모바일(≤900px)은 LIST와 동일하게 상호/대표, 주소, 전화/등록번호 3줄 스택,
       PC(900px 초과)는 3개 그룹을 한 줄로 펼침 */
    .office-card { margin-top: 20px; padding: 10px 12px 11px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
    .office-card-row { display: flex; flex-direction: column; gap: 4px; font-size: 10px; color: #94a3b8; line-height: 1.5; }
    .office-card-group { display: flex; gap: 14px; }
    .office-card-item { flex-shrink: 0; }
    .office-card-item--address { flex: 1; min-width: 0; }
    .office-card-label { color: #94a3b8; }
    .office-card-value { color: #64748b; font-weight: 600; word-break: keep-all; }
    @media (min-width: 901px) {
      .office-card-row { flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 24px; }
    }

    /* 위치 지도 카드 — 모바일에서 위치/지도 탭 콘텐츠(지도+편의시설)가 이 안으로 옮겨와 채워짐.
       PC에서는 비활성 상태로 숨겨져 있고(display:none, JS가 유지), 위치/지도 탭이 그대로 쓰인다. */
    .map-card { margin-top: 20px; }
    .map-card-title { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 10px; }

    /* 모바일 전용 "건물정보" 탭 버튼 / PC 전용 "위치·지도" 탭 버튼 — 화면 폭에 따라 서로 교차 표시 */
    .tab-btn-mobile-only { display: none; }

    /* 지도 */
    .map-wrap { border-radius: 12px; overflow: hidden; height: 380px; border: 1px solid #eef1f5; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
    .fac-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
    /* 네모난 탭 형태 (알약형 대신 사각형에 가까운 라운드) */
    .fac-btn { padding: 6px 14px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; color: #374151; transition: all .15s; white-space: nowrap; font-family: inherit; }
    .fac-btn:hover { border-color: #c0392b; color: #c0392b; }
    .fac-btn.active { background: #c0392b; color: #fff; border-color: #c0392b; }
    #facility-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }

    /* ── 사이드바 ── */
    .sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; }
    .side-card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 1px 8px rgba(0,0,0,.07); }

    /* 담당자 */
    .agent-top-link { cursor: pointer; border-radius: 12px; padding: 6px; margin: -6px -6px 6px; transition: background .15s; }
    .agent-top-link:hover { background: #f8fafc; }
    .agent-top-link:active { background: #f1f5f9; }
    .agent-photo-wrap { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg,#c0392b,#e74c3c); display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 12px; border: 3px solid #fef2f2; flex-shrink: 0; }
    .agent-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
    .agent-name-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
    .agent-name { font-size: 16px; font-weight: 800; color: #0f172a; text-align: center; }
    .agent-home-badge {
      display: inline-flex; align-items: center; gap: 3px;
      background: linear-gradient(135deg,#fef2f2,#fde2e1);
      color: #c0392b; font-size: 11px; font-weight: 700;
      padding: 3px 10px 3px 8px; border-radius: 20px;
      border: 1.5px solid #c0392b; white-space: nowrap;
      box-shadow: 0 1px 3px rgba(192,57,43,.2);
      transition: transform .15s, box-shadow .15s;
    }
    .agent-home-badge .material-symbols-outlined { font-size: 13px; }
    .agent-top-link:hover .agent-home-badge { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(192,57,43,.28); }
    .agent-role { font-size: 12px; color: #94a3b8; text-align: center; margin-top: 2px; }
    .agent-divider { border: none; border-top: 1px solid #f1f5f9; margin: 14px 0; }
    .agent-phone { font-size: 15px; font-weight: 700; color: #1e293b; text-align: center; margin-bottom: 10px; }
    .btn-call { display: block; width: 100%; padding: 11px; background: #c0392b; color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; font-family: inherit; transition: background .15s; }
    .btn-call:hover { background: #a93226; }
    .agent-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
    .agent-stat { background: #f8fafc; border-radius: 10px; padding: 10px; text-align: center; }
    .agent-stat-num { font-size: 20px; font-weight: 900; color: #c0392b; }
    .agent-stat-label { font-size: 11px; color: #94a3b8; margin-top: 2px; }
    .agent-stat-fav { width: 100%; border: none; font-family: inherit; cursor: pointer; transition: background .15s, transform .1s; }
    .agent-stat-fav:hover { background: #f1f5f9; }
    .agent-stat-fav:active { transform: scale(.97); }
    .agent-stat-fav.active { background: #fdecea; }
    .agent-stat-fav.active .agent-stat-label { color: #c0392b; font-weight: 700; }

    /* 문의 폼 */
    .inq-title { font-size: 15px; font-weight: 800; color: #0f172a; margin: 0 0 14px; }
    .inq-input { width: 100%; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 14px; font-family: inherit; background: #f8fafc; color: #1e293b; transition: border-color .15s; margin-bottom: 10px; }
    .inq-input:focus { outline: none; border-color: #c0392b; background: #fff; }
    .inq-textarea { width: 100%; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 14px; font-family: inherit; background: #f8fafc; color: #1e293b; resize: vertical; height: 90px; transition: border-color .15s; margin-bottom: 10px; }
    .inq-textarea:focus { outline: none; border-color: #c0392b; background: #fff; }
    .btn-inq { width: 100%; padding: 12px; background: #0f172a; color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s; }
    .btn-inq:hover { background: #1e293b; }

    /* 개인정보수집 약관 동의 (index.html의 inquiry-check/terms-modal과 동일 스타일) */
    .inquiry-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666; margin-bottom: 10px; }
    .inquiry-check input[type="checkbox"] { flex-shrink: 0; }
    .inquiry-terms-btn { margin-left: auto; background: none; border: none; color: #c0392b; text-decoration: underline; font-size: 12px; font-family: inherit; cursor: pointer; padding: 0; }

    .terms-modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 2000;
      background: rgba(15,23,42,.55);
      align-items: center; justify-content: center; padding: 20px;
    }
    .terms-modal-overlay.active { display: flex; }
    .terms-modal {
      background: #fff; border-radius: 14px; width: 100%; max-width: 460px; max-height: 82vh;
      display: flex; flex-direction: column; overflow: hidden;
      box-shadow: 0 12px 40px rgba(0,0,0,.25);
    }
    .terms-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eee; }
    .terms-modal-head h3 { font-size: 16px; font-weight: 800; color: #222; margin: 0; }
    .terms-modal-close { background: none; border: none; font-size: 22px; line-height: 1; color: #999; cursor: pointer; padding: 0; }
    .terms-modal-body { padding: 18px 20px; overflow-y: auto; font-size: 13px; color: #444; line-height: 1.7; }
    .terms-modal-body h4 { font-size: 14px; font-weight: 800; color: #222; margin: 16px 0 8px; }
    .terms-modal-body h4:first-child { margin-top: 0; }
    .terms-modal-body ul { margin: 6px 0 0; padding-left: 18px; }
    .terms-modal-body li { margin-bottom: 4px; }
    .terms-modal-foot { padding: 14px 20px; border-top: 1px solid #eee; }
    .terms-modal-ok { width: 100%; padding: 11px; background: #c0392b; color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s; }
    .terms-modal-ok:hover { background: #a5321f; }

    /* ── 유사매물 ── */
    .similar-sec { max-width: 1200px; margin: 0 auto 60px; padding: 0 20px; }
    .similar-title { font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 16px; }
    .similar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    /* 카드 자체 스타일(.prop-card 등)은 /assets/css/property-card.css 공유 파일 참조 —
       index.html의 매물카드와 완전히 동일한 모양을 유지하기 위해 여기서 별도로 정의하지 않는다. */

    /* ── 반응형 ── */
    @media (max-width: 900px) {
      .dp-wrap { grid-template-columns: 1fr; }
      .sidebar { position: static; }
      .gallery-main-wrap { height: 280px; }
      .similar-grid { grid-template-columns: repeat(2, 1fr); }

      /* 위치/지도 탭: 모바일에서는 지도를 먼저 보여주고, 편의시설 버튼은
         지도 아래로 내려 5개씩 2줄 정사각 그리드로 반듯하게 배치.
         세부 리스트(#facility-list)는 모바일에서는 노출하지 않는다. */
      .map-wrap { height: 280px; }
      .fac-btns {
        margin: 10px 0 0; gap: 5px;
        display: grid; grid-template-columns: repeat(5, 1fr);
      }
      .fac-btn {
        padding: 4px 2px; font-size: 10.5px; line-height: 1.2; border-radius: 6px; text-align: center;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      #facility-list { display: none; }

      /* 매물정보 탭: 900px 이하 모바일에서는 표 형태를 1열로 전환, 행간격도 PC보다 살짝 좁게 */
      .spec-grid { grid-template-columns: 1fr; }
      .spec-row { padding: 10px 2px; }

      /* 모바일: 매물정보/건물정보 2탭 구조 — 위치·지도 탭은 숨기고(지도는 매물정보 탭 안으로 이동),
         건물정보 탭 버튼을 노출한다(hideDetailInfo면 JS가 다시 숨김). */
      .tab-btn-mobile-only { display: inline-flex; }
      .tab-btn-desktop-only { display: none; }
    }
    @media (max-width: 540px) {
      .dp-wrap { padding: 12px 12px 40px; gap: 12px; }
      .gallery-main-wrap { height: 220px; }
      .prop-title { font-size: 18px; }
      .price-main { font-size: 22px; }
      .similar-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .similar-sec { padding: 0 12px; }
      .tab-btn { padding: 8px 14px; font-size: 13px; }
    }
    @media (max-width: 480px) {
      .bc-inner { padding: 0 12px; font-size: 12px; }

      .tab-btn { padding: 7px 12px; font-size: 12.5px; }

      .spec-table td:first-child { width: 88px; font-size: 13px; }
      .spec-table td:last-child { font-size: 13px; }
      .spec-label { font-size: 11px; width: 92px; }
      .spec-value { font-size: 13px; }

      .info-card, .side-card, .client-info-card { padding: 16px; }
      .map-wrap { height: 240px; }

      .agent-stats { gap: 6px; }
      .agent-stat-num { font-size: 17px; }
    }

    /* 초소형 화면: 브레드크럼과 중복되는 상단 메뉴를 숨겨 한 줄 유지 보장 */
    @media (max-width: 360px) {
      .gnb-menu { display: none; }
      .gnb-btn { max-width: 60vw; }
    }

    /* ── 모바일 전용: 하단 고정 콜/문의 바 ── */
    .mobile-cta-bar { display: none; }
    @media (max-width: 900px) {
      .mobile-cta-bar {
        display: flex; gap: 10px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
        background: #fff; border-top: 1px solid #e2e8f0;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 16px rgba(0,0,0,.08);
      }
      .mobile-cta-btn {
        flex: 1; display: flex; align-items: center; justify-content: center;
        gap: 6px; padding: 13px; border-radius: 12px;
        font-size: 14px; font-weight: 700; font-family: inherit;
        border: none; cursor: pointer; text-decoration: none;
      }
      .mobile-cta-call { background: #c0392b; color: #fff; }
      .mobile-cta-inq  { background: #0f172a; color: #fff; }
      /* 하단 고정바에 콘텐츠가 가리지 않도록 여백 확보 */
      #detail-main-content { padding-bottom: 78px; }
    }

    /* ── 폰 전용: list 페이지와 동일한 떠다니는 문의 배지 버튼 ── */
    #dp-mobile-consult-btn { display: none; }
    @media (max-width: 900px) {
      #dp-mobile-consult-btn {
        display: flex; align-items: center; gap: 6px;
        position: fixed;
        right: 16px; bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        z-index: 290;
        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);
        animation-play-state: paused;
      }
    }
    @keyframes dpConsultFloat {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }

    /* ── 모바일: iOS 자동 확대 방지(인풋 폰트 16px) + 터치 영역 보강 ── */
    @media (max-width: 768px) {
      .lp-input, .inq-input, .inq-textarea { font-size: 16px; }
      .tab-btn { min-height: 40px; }
      .gal-nav { width: 36px; height: 36px; }
      .inquiry-check { flex-wrap: wrap; row-gap: 6px; }
    }

    /* ── 모바일: 개인정보 안내 모달을 하단 시트 형태로 ── */
    @media (max-width: 480px) {
      .terms-modal-overlay { padding: 10px; align-items: flex-end; }
      .terms-modal { max-height: 90vh; border-radius: 12px 12px 0 0; }
      .terms-modal-body { padding: 14px 16px; font-size: 12px; }
      .terms-modal-body h4 { font-size: 13px; }
    }

/* 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;
}

/* 권리금 노출 강조 표시 (register.js 권리금노출 체크 시 상세페이지에 색상 강조) */
.dp-premium-hl { font-weight:800; color:#059669; background:#d1fae5; padding:1px 6px; border-radius:5px; }

/* ─────────────────────────────────────────
   로딩 스켈레톤 — 카드→상세 진입 시 prefetch 즉시렌더가 되기 전까지,
   또는 prefetch 데이터가 없는 경우(새로고침/직접 URL/공유링크) 실데이터 도착 전까지
   잠깐 보여주는 자리표시자.
───────────────────────────────────────── */
.md-skel-wrap #detail-title-text,
.md-skel-wrap #detail-price-text,
.md-skel-wrap #detail-location-text {
  color: transparent !important;
  background: linear-gradient(90deg, #eef1f4 25%, #e2e6ea 37%, #eef1f4 63%);
  background-size: 400% 100%;
  animation: mdSkelShimmer 1.4s ease infinite;
  border-radius: 6px;
}
.md-skel-wrap .gallery-placeholder {
  background: linear-gradient(90deg, #eef1f4 25%, #e2e6ea 37%, #eef1f4 63%);
  background-size: 400% 100%;
  animation: mdSkelShimmer 1.4s ease infinite;
}
.md-skel-wrap .gallery-placeholder #gallery-type-icon { visibility: hidden; }
@keyframes mdSkelShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ── AI 챗봇 버튼(ai-chat-fab.css) — 상세 페이지 전용 위치 재정의 ──
   모바일(≤900px)에서는 이미 하단 전체폭 콜/문의 바(.mobile-cta-bar)와 우측 하단
   빠른상담 배지(#dp-mobile-consult-btn, right:16px / bottom: calc(88px+안전영역))가
   떠있어서, AI챗봇 버튼 기본 위치(우측 하단)를 그대로 쓰면 겹친다. 이 페이지에서만
   반대편(좌측) + 두 요소보다 높은 위치로 옮긴다.
   ai-chat-fab.css가 <head>에서 이 파일보다 먼저 로드되므로, 동일 우선순위(클래스 선택자
   1개)에서는 소스 순서상 나중에 오는 이 규칙이 이긴다 — !important 불필요. */
@media (max-width: 900px) {
  .ai-chat-fab {
    left: 14px;
    right: auto;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }
}