.search-panel {
    position: absolute;
    top: calc(var(--ui-inset-y, 20px) + 50px);
    left: var(--ui-inset-x, 20px);
    z-index: 10;
    background: white;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.35);
    /* 기본 폭(원래대로) */
    width: 320px;
    min-width: 320px;
    /* 폭은 JS에서 콘텐츠 길이에 따라 자동 확장합니다.
     * 여기서는 "뷰포트 기준 최대폭"만 잡되, UI 스케일(transform)에도 맞도록 unscaled 값으로 환산합니다. */
    max-width: calc((100vw - 24px) / var(--ui-scale, 1));
    /* 기본은 넉넉하게(요약표가 없거나 숨겨진 상태). 실제 제한은 search.js가 요약표/화면높이에 맞춰 동적으로 갱신합니다. */
    max-height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    transform: scale(var(--ui-scale, 1));
    transform-origin: top left;
    overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Global loading overlay (search)
 * ────────────────────────────────────────────────────────────────────────── */
.global-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    user-select: none;
}

.global-loading-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.global-loading-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: #1a73e8;
    animation: globalLoadingSpin 0.9s linear infinite;
}

.global-loading-text {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.2px;
}

@keyframes globalLoadingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 실거래가 패널이 열려 있을 때는 우측 컬럼(가격) + 스크롤바 공간을 확보하기 위해 폭을 조금 더 확보 */
.search-panel.trade-open {
    width: 360px;
    min-width: 360px;
}

.search-panel h2 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

.search-top-row {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-bottom: 6px;
    /* 요청: 상단 메뉴 버튼(+, 저장, 초기화, 검색)은 항상 한 줄로 */
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
}

.search-save-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.search-input-wrap {
    width: 100%;
    flex-shrink: 0;
}

.search-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    max-height: 200px; /* 여러 줄 입력 시 최대 높이 제한 (약 10줄) */
    padding: 8px 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    line-height: 18px;
    resize: none;
    overflow-y: auto; /* 최대 높이 초과 시 스크롤 */
}

/* 검색 후: 입력창은 접고(1줄 높이 고정), 결과 리스트가 더 보이도록 */
.search-panel.compact-input .search-input {
    /* 요청: 검색 후에도 입력창이 너무 얇게(1줄) 줄어들지 않게 "2줄 정도" 보이도록 */
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 13px !important;
    line-height: 16px !important;
    /* 가로 스크롤 대신 줄바꿈으로 보여주기 */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.search-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    background: #f5f5f5;
    cursor: pointer;
    color: #333;
    font-size: 16px;
    line-height: 1;
}

.search-btn:hover {
    background: #e8e8e8;
}

/* 검색결과 닫기/열기 토글 버튼 */
.search-btn.search-results-toggle.active {
    background: #eaf1ff;
    border-color: rgba(43, 111, 255, 0.35);
    color: #2b6fff;
}

.search-btn.search-results-toggle .search-results-toggle-icon {
    transition: transform 140ms ease;
}

/* 닫힘 상태(active)에서는 위쪽(열기) 방향 느낌 */
.search-btn.search-results-toggle.active .search-results-toggle-icon {
    transform: rotate(180deg);
}

.saved-search-dropdown {
    position: fixed;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 280px;
    max-width: 350px;
    /* 모달(종합정보/가중평균 등) 백드롭(blur)보다 아래에 있어야 블러가 자연스럽게 적용됩니다. */
    z-index: 10;
    overflow: visible;
    resize: vertical;
    min-height: 100px;
    max-height: 80vh;
}

.saved-search-header {
    padding: 10px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: ns-resize;
}

.saved-search-header .close-btn {
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.saved-search-list {
    overflow-y: auto;
    flex: 1;
}

.saved-search-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.saved-search-item:last-child {
    border-bottom: none;
}

.saved-search-item-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    gap: 8px;
}

.saved-search-item-header:hover {
    background: #f8f8f8;
}

.saved-search-item-content {
    flex: 1;
    min-width: 0;
}

.saved-search-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saved-search-item-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.saved-search-item-delete {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
}

.saved-search-item-delete:hover {
    background: #fee;
    color: #d32f2f;
}

.saved-search-item-add {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
}

.saved-search-item-add:hover {
    background: #e8f5e9;
    color: #4CAF50;
}

.saved-search-items-detail {
    background: #f5f5f5;
    padding: 8px;
    border-top: 1px solid #e0e0e0;
    max-height: 200px;
    overflow-y: auto;
}

.saved-search-item-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: white;
    margin-bottom: 4px;
    border-radius: 4px;
    font-size: 12px;
}

.saved-search-item-row:hover {
    background: #fafafa;
}

.saved-search-item-row-label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.saved-search-item-row-delete {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.saved-search-item-row:hover .saved-search-item-row-delete {
    opacity: 1;
}

.saved-search-item-row-delete:hover {
    background: #fee;
    color: #d32f2f;
}

.saved-search-item-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

.saved-search-item-row .item-number {
    width: 18px;
    height: 18px;
    background: #666;
    color: white;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.saved-search-item-row .item-type-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}

.saved-search-item-row .item-type-badge.addr {
    background: #4caf50;
    color: white;
}

.saved-search-item-row .item-type-badge.trade {
    background: #1976d2;
    color: white;
}

.saved-search-item-row .item-address {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

.saved-search-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.saved-search-load-selected-btn,
.saved-search-load-all-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

.saved-search-load-selected-btn {
    background: #1976d2;
    color: white;
}

.saved-search-load-selected-btn:hover {
    background: #1565c0;
}

.saved-search-load-all-btn {
    background: #e0e0e0;
    color: #333;
}

.saved-search-load-all-btn:hover {
    background: #d0d0d0;
}

.saved-search-actions {
    padding: 8px 12px;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
}

.saved-search-action-btn {
    width: 100%;
    padding: 8px 12px;
    border: 1px dashed #ccc;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.saved-search-action-btn:hover {
    background: #f0f7ff;
    border-color: #1976d2;
    color: #1976d2;
}

.saved-search-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.saved-search-empty {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 12px;
}

.search-group {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.search-group input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.search-group button {
    padding: 10px 20px;
    background: #1976d2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.result-panel {
    margin-top: 6px;
    background: #fafafa;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 스크롤은 #resultList에 부여 */
}

.result-panel.embedded {
    position: static;
    box-shadow: none;
}

#resultList {
    display: flex;
    flex-direction: column;
    gap: 0; /* 결과 아이템은 붙여서 */
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.result-panel-resize-handle {
    height: 10px;
    flex-shrink: 0;
    cursor: ns-resize;
    border-top: 1px solid #e0e0e0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0));
}

.result-panel-resize-handle::after {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
    margin: 3px auto 0 auto;
}

.result-item {
    padding: 8px;
    margin: 0;
    border: 1px solid #e0e0e0;
    border-left: 0;
    border-radius: 0;
    cursor: pointer;
    transition: none;
    /* 긴 문자열 때문에 패널 폭이 밀리는 걸 방지 */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.result-item:not(:last-child) {
    border-bottom: 0; /* 아이템 사이 이중 라인 제거 */
}

.result-item:hover {
    background: transparent;
}

.result-item.active {
    background: #f5f5f5;
    box-shadow: none;
}

/* 투박한 결과 행 레이아웃 */
.result-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-title {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: #222;
    /* 최대 폭을 넘어서는 경우: ... 대신 줄바꿈으로 끝까지 보이도록 */
    white-space: normal;
    overflow-wrap: anywhere;
}

.result-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.result-summary {
    margin-top: 4px;
    font-size: 11px;
    color: #C00000;
}

.result-item.trade-item {
    position: relative;
    background: #fafafa;
}

.result-item.trade-item .result-summary {
    color: #666;
}

.result-item.trade-item .result-summary.land-summary {
    color: #C00000;
}

.trade-badge {
    font-size: 9px;
    font-weight: 600;
    color: white;
    background: #1976d2;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 6px;
    flex-shrink: 0;
}

.result-info-plain {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #eee;
    font-size: 11px;
    color: #333;
}

.result-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.color-picker-wrapper {
    position: relative;
    margin-right: 8px;
    flex-shrink: 0;
}

.color-picker-current {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-picker-current:hover {
    border-color: rgba(0,0,0,0.4);
}

.color-number {
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    pointer-events: none; /* 클릭이 부모(.color-picker-current)로 전달되도록 */
}

.color-picker-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: white;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-top: 2px;
}

.color-picker-dropdown.open {
    display: grid;
}

.color-option {
    width: 20px;
    height: 20px;
    border-radius: 0;
    cursor: pointer;
    border: 2px solid transparent;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option[data-selected="true"] {
    border-color: #333;
}

.result-header {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-title {
    flex: 1;
    white-space: normal;
    overflow-wrap: anywhere;
}

.result-actions {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.result-link-btn {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 0;
    border: 1px solid #c5cae9;
    background: white;
    color: #1a237e;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.result-link-btn.land {
    border-color: #a5d6a7;
    background: white;
    color: #2E75B6;
}

.result-link-btn.building {
    border-color: #ffcc80;
    background: white;
    color: #FF0000;
}

.result-link-btn:hover {
    opacity: 0.9;
}

.result-address {
    font-size: 12px;
    color: #666;
}

.result-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 12px;
}

.info-item {
    color: #555;
}

.info-label {
    color: #999;
    margin-right: 4px;
}

.result-error {
    font-size: 12px;
    color: #f44336;
    margin-top: 4px;
    white-space: pre-line;
}


.result-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
    font-size: 12px;
    display: none;
}

.result-details.expanded {
    display: block;
}

.streetview-panel {
    position: absolute;
    bottom: var(--ui-inset-y, 20px);
    right: var(--ui-inset-x, 20px);
    z-index: 10;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 320px;
    height: 214px;
    /* UI/UX: 작은 화면에서 초기 폭을 더 작게 시작할 수 있게 */
    min-width: 240px;
    min-height: 200px;
    max-width: 80vw;
    max-height: calc(100vh - 0px);
    display: none;
    overflow: hidden;
    /* 카카오 로드뷰는 내부에서 3D/CSS 변환을 사용하므로,
     * 부모에 transform(scale)이 걸리면 원근이 깨져 화면이 심하게 왜곡될 수 있습니다. */
    transform: none;
}

/* 하단 요약 표 패널 */
.summary-table-panel {
    position: absolute;
    left: var(--ui-inset-x, 20px);
    right: var(--ui-inset-x, 20px);
    bottom: var(--ui-inset-y, 20px);
    z-index: 9;
    background: #f7f7f7;
    /* 요청: 지적도 테두리 두께(3px) 통일 */
    border: 3px solid var(--ui-accent-border);
    border-radius: 8px;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
    height: auto;
    max-height: 320px;
    overflow: hidden;
    transform: scale(var(--ui-scale, 1));
    transform-origin: bottom left;
    display: none;
}

.summary-table-panel.visible {
    display: block;
}

.summary-table-wrapper {
    width: 100%;
    max-height: inherit;
    overflow-y: auto;
    overflow-x: auto;
}

.summary-table-section {
    padding: 0;
}

.summary-table-section + .summary-table-section {
    border-top: 1px solid #dcdcdc;
}

.summary-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 11px;
    table-layout: auto;
}

.summary-table th,
.summary-table td {
    border: 1px solid #d0d0d0;
    padding: 4px 6px;
    /* 가로 스크롤을 피하기 위해 기본 줄바꿈 허용 */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    background: #ffffff;
    text-align: center;
}

.summary-table th {
    background: #e6e6e6;
    color: #333;
    font-weight: 700;
}

/* 상단(토지) 헤더만 sticky */
.summary-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* 도로명주소 셀(헤더/내용): 좌측 정렬 (colspan=3) */
.summary-table .summary-land-address {
    text-align: center;
}

/* 건축 헤더(중간 헤더) 행 스타일 */
.summary-table tr.summary-subheader-building th {
    background: #e6e6e6;
    color: #333;
    font-weight: 700;
}

.summary-table td.muted {
    color: #888;
}

.streetview-panel.visible {
    display: flex;
    flex-direction: column;
}

.streetview-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    z-index: 100;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 6px 0 6px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.14);
    opacity: 0.45;
    transition: opacity 0.15s, background 0.15s, box-shadow 0.15s;
    backdrop-filter: blur(3px);
}

.streetview-resize-handle::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 4px 0 4px 0;
    /* 미니멀한 코너 그립(대각선 3줄) */
    background:
        linear-gradient(135deg,
            transparent 0%,
            transparent 40%,
            rgba(0,0,0,0.25) 40%,
            rgba(0,0,0,0.25) 44%,
            transparent 44%,
            transparent 55%,
            rgba(0,0,0,0.25) 55%,
            rgba(0,0,0,0.25) 59%,
            transparent 59%,
            transparent 70%,
            rgba(0,0,0,0.25) 70%,
            rgba(0,0,0,0.25) 74%,
            transparent 74%,
            transparent 100%);
    opacity: 0.8;
}

.streetview-resize-handle:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}

.streetview-header {
    position: relative;
    padding: 12px 20px 12px 32px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

/* 로드뷰 닫기 버튼: 작게 + 패널 우측 상단 고정 */
#closeStreetViewBtn.close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    font-size: 18px;
    line-height: 20px;
    color: #555;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

#closeStreetViewBtn.close-btn:hover {
    background: rgba(0,0,0,0.06);
    color: #222;
}

/* 검색결과(.result-title)와 동일한 체감 크기: 검색 패널에 적용된 --ui-scale을 반영 */
.streetview-header h3 {
    font-size: calc(12px * var(--ui-scale, 1));
    margin: 0;
    color: #333;
    flex: 1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: keep-all;
    max-width: calc(100% - 40px);
}

.close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #333;
}

.streetview-container {
    width: 100%;
    flex: 1;
    position: relative;
    min-height: 0;
}

/* 건축물 정보 패널 */
.building-info-panel {
    position: absolute;
    top: 70px;
    left: 395px;
    z-index: 10;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 3px solid var(--ui-accent-border);
    /* 요청: 전체 팝업 폭을 20px 축소 */
    width: 500px;
    max-width: calc(100vw - 30px);
    height: auto;
    min-height: 0;
    max-height: none;
    display: none;
    flex-direction: column;
    transform: scale(var(--ui-scale, 1));
    transform-origin: top left;
    overflow: hidden;
    /* 요청: 팝업 내 모든 글자 색상은 검은색으로 통일 */
    color: #000;
}

.building-info-panel.visible {
    display: flex;
}

.building-panel-resize-handle {
    /* 검색 결과 패널 리사이즈 탭과 동일한 "하단 탭(그립)" 스타일 */
    height: 10px;
    flex-shrink: 0;
    cursor: ns-resize;
    border-top: 1px solid #e0e0e0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0));
    z-index: 3;
    touch-action: none;
    pointer-events: auto;
}

.building-panel-resize-handle.hidden {
    display: none;
}

.building-panel-resize-handle::after {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
    margin: 3px auto 0 auto;
}

.building-info-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: var(--ui-header-bg);
    border-radius: 8px 8px 0 0;
}

.building-info-header h3 {
    font-size: 15px;
    margin: 0;
    color: #000;
}

.building-info-content {
    flex: 0 0 auto;
    overflow: visible;
    padding: 16px;
}

.building-info-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 주소 */
.building-address {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    padding: 10px 12px;
    background: #f0f0f0;
    border-radius: 6px;
    margin-bottom: 4px;
    /* 긴 주소/건물명도 좌우 드래그 없이 보이도록 줄바꿈 */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

/* 기본 정보(테이블) 섹션 */
.building-basic-section {
    margin-top: 8px;
}

.building-basic-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #1976d2;
}

.building-table-wrapper {
    /* 기본정보는 가로 스크롤 대신 줄바꿈으로 보여주기 */
    overflow-x: hidden;
    /* 건축물대장: 기본정보 테이블 바깥 테두리 제거 */
    border: none;
    border-radius: 8px;
}

.building-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px; /* 결과 리스트 타이틀(예: "이곡동 1000-258") 톤 */
    table-layout: fixed;
}

.building-table col.label {
    /* 요청: 항목 제목셀은 줄바꿈 없이(한 줄) → label 컬럼 폭을 더 넓힘 */
    width: 26%;
}
.building-table col.value {
    /* 값 셀은 줄바꿈으로 대응 */
    width: 24%;
}

.building-table th {
    padding: 7px 6px;
    /* 요청: 제목행(항목명)은 좌측 정렬 */
    text-align: left;
    /* 요청: 제목셀은 조금 더 진한 회색 + 볼드 */
    background: #e6e6e6;
    font-weight: 700;
    color: #000;
    /* 요청: 회색 테두리(그리드) */
    border: 1px solid #d0d0d0;
    /* 요청: 항목 제목셀은 줄바꿈 금지(한 줄) + 컬럼 폭으로 해결 */
    white-space: nowrap;
    font-size: 12px;
}

.building-table td {
    padding: 7px 6px;
    /* 요청: 테이블 중앙 정렬 */
    text-align: center;
    font-weight: 400;
    color: #000;
    /* 요청: 회색 테두리(그리드) */
    border: 1px solid #d0d0d0;
    /* 값은 셀 안에서 줄바꿈되도록(칸 밖으로 튀어나오지 않게) */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
    font-size: 12px;
}

.building-table td.span-cell {
    /* 요청: 지번/도로명/건물명 값은 좌측 정렬 */
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.building-table td.align-right {
    text-align: right;
}

.building-table tbody tr:hover {
    background: #f8f9fa;
}

/* 정보 그리드 */
.building-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.building-info-grid .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #fafafa;
    border-radius: 4px;
    font-size: 12px;
}

.building-info-grid .info-key {
    color: #666;
    font-weight: 500;
}

.building-info-grid .info-value {
    color: #333;
    font-weight: 600;
    text-align: right;
}

/* 층별 정보 섹션 */
.floor-section {
    margin-top: 8px;
    position: relative;
}

.floor-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #1976d2;
}

.floor-table-wrapper {
    max-height: 250px;
    overflow-y: auto;
    /* 건축물대장: 층별정보 테이블 바깥 테두리 제거 */
    border: none;
    border-radius: 8px;
}

.floor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px; /* 결과 리스트 타이틀 톤 */
    table-layout: fixed;
}

.floor-table col.floor-col-use {
    width: 30%;
}
.floor-table col.floor-col-purpose {
    width: 52%;
}
.floor-table col.floor-col-area {
    /* 요청: 스크롤바가 생겨도 면적이 답답하지 않게 폭을 조금 더 확보 */
    width: 18%;
}

.floor-table thead {
    position: sticky;
    top: 0;
    /* 요청: 층별정보 제목행도 동일 톤(더 진한 회색) */
    background: #e6e6e6;
    z-index: 1;
}

.floor-table th {
    padding: 6px 4px;
    text-align: center;
    font-weight: 700;
    color: #000;
    /* 요청: 회색 테두리(그리드) */
    border: 1px solid #d0d0d0;
    white-space: nowrap;
    font-size: 12px;
}

.floor-table td {
    padding: 6px 4px;
    /* 요청: 회색 테두리(그리드) */
    border: 1px solid #d0d0d0;
    color: #000;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
}

.floor-table tbody tr:hover {
    background: #f8f9fa;
}

/* 층별 정보: "층/용도/면적" 3컬럼에서 용도는 길 수 있어 줄바꿈 허용 */
.floor-table td.floor-use {
    /* 요청: 테이블 중앙 정렬 */
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.floor-table td.floor-purpose {
    /* 요청: 테이블 중앙 정렬 */
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
    color: #000;
    font-size: 11px;
}

.floor-table .area {
    /* 요청: 면적 데이터셀 우측 정렬 + 폭을 조금 줄임 */
    text-align: right;
    /* 스크롤바/폰트 렌더 차이로 지나치게 좁아 보이는 경우를 방지 */
    min-width: 92px;
    font-family: inherit; /* 전체 폰트 통일 */
}

.building-info-container .no-data {
    color: #999;
    font-size: 13px;
    text-align: center;
    padding: 20px;
    margin: 0;
}

/* 이전 스타일 (호환성) */
.building-section {
    background: #fafafa;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.building-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1976d2;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #1976d2;
}

.building-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.building-details div {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
}

.building-details strong {
    display: inline-block;
    width: 120px;
    color: #666;
    font-weight: 600;
}

.building-section .no-data {
    color: #999;
    font-size: 13px;
    text-align: center;
    padding: 10px;
    margin: 0;
}

.building-section .error-data {
    color: #f44336;
    font-size: 13px;
    padding: 10px;
    margin: 0;
}


/* 실거래가 패널 */
.realestate-panel {
    position: absolute;
    bottom: var(--ui-inset-y, 20px);
    left: var(--ui-inset-x, 20px);
    z-index: 10;
    background: white;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 3px solid var(--ui-accent-border);
    min-width: 180px;
    transform: scale(var(--ui-scale, 1));
    transform-origin: bottom left;
}

.realestate-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.realestate-header .toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.realestate-header .toggle-label input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.month-select {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.realestate-filters {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.filter-item input {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.filter-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* 실거래가 마커 */
.realestate-marker {
    padding: 4px 8px;
    border-radius: 4px;
    background: white;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    text-align: center;
    /* 요청: 말줄임(...) 대신 팝업 폭을 늘려 텍스트가 다 보이게 */
    max-width: 320px;
}

.realestate-marker:hover {
    transform: scale(1.1);
    z-index: 100;
}

.realestate-marker .marker-price {
    font-size: 12px;
    font-weight: 700;
}

.realestate-marker .marker-year {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    opacity: 0.95;
}

.realestate-marker .marker-name {
    font-size: 9px;
    font-weight: 400;
    opacity: 0.9;
    /* 말줄임 제거 + 최대폭 확장(뷰에서 과도하게 커지지 않게 상한만 둠) */
    max-width: 240px;
    overflow: visible;
    text-overflow: clip;
}

/* 거래내역 패널 */
.trade-history-panel {
    margin-top: 10px;
    border-top: 1px solid #e0e0e0;
    padding-top: 10px;
    /* 검색 패널 내부에서 남은 높이를 채우고, 리스트 스크롤은 내부에서 발생 */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    /* 요청: 나머지 글자는 모두 검정색 */
    color: #000;
    /* 가격/강조색 통일(대표 실거래가 + 테이블 가격) */
    --trade-price-blue: #1976d2;
}

.trade-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.trade-history-header h3 {
    font-size: 14px;
    margin: 0;
    color: #000;
}

.trade-history-list {
    max-height: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* 요청: 가로 스크롤 없이 여백을 줄여 한 화면에 들어오게 */
    overflow-x: hidden;
    /* 기본: 우측 여백을 최소화해 "텅 빈 공간"을 줄입니다. */
    padding-right: 2px;
    /* 스크롤바 유무로 가로폭이 흔들리지 않게(지원 브라우저에서) */
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

/* 스크롤바가 실제로 있는 경우에만 reserve padding을 크게 잡아 가격이 가려지는 문제를 방지합니다. */
.trade-history-list.has-vscroll {
    /* 기존(18px)은 여백이 과해 보일 수 있어 축소 */
    padding-right: 10px;
}

.trade-history-item {
    display: grid;
    /*
      좁은 패널에서도 "가격"이 잘리지 않도록:
      - 거래면적(2번째)은 유동폭(minmax(0,1fr))로 두고
      - 가격(마지막)은 고정폭으로 확보
    */
    /* 가로 스크롤 없이 들어오도록 폭/간격 최적화 (4컬럼: 거래일자/거래면적/층/가격, 동 제거) */
    grid-template-columns: 78px minmax(70px, 1fr) 34px 66px;
    gap: 3px;
    padding: 5px 6px 5px 2px; /* 오른쪽 여백 축소 */
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
    font-size: 11px;
    align-items: center;
    width: 100%;
}

.trade-history-item > span {
    min-width: 0;
    white-space: nowrap;
    /* 요청: 헤더/값이 '...'로 잘리지 않게 */
    overflow: visible;
    text-overflow: clip;
    color: #000;
    text-align: center; /* 요청: 아래 표는 중앙정렬 */
}

.trade-history-item .trade-price {
    /* 가격은 핵심: 우측 정렬 + 폭 고정(그리드)에서 최대한 온전히 표시 */
    /* 요청: '...'로 잘리지 않게 */
    overflow: visible;
    text-overflow: clip;
    font-variant-numeric: tabular-nums;
    justify-self: auto;
}

.trade-history-head {
    position: sticky;
    top: 0;
    z-index: 1;
    /* 헤더 행도 통일된 톤 */
    background: #e6e6e6;
    font-weight: 700;
    border-bottom: 1px solid #e6e6e6;
    padding-right: 6px; /* 헤더 우측 여백 축소 */
}

.trade-history-head > span {
    color: #000;
    font-size: 11px;
    text-align: center;
}

/* 열제목은 검정색(데이터만 파란색) */
.trade-history-head .trade-price {
    color: #000;
}

/* 특정 환경에서 .trade-price 규칙이 더 강하게 먹는 경우가 있어 헤더에 한 번 더 고정 */
.trade-history-item.trade-history-head .trade-price {
    color: #000;
}

.trade-history-item:last-child {
    border-bottom: none;
}

.trade-history-item .trade-date {
    color: #000;
}

.trade-history-item .trade-dong {
    color: #000;
}

.trade-history-item .trade-floor {
    color: #000;
}

.trade-history-item .trade-price {
    /* 요청: 글자 색상은 금액 탭(파란색) 톤으로 */
    font-weight: 700;
    color: var(--trade-price-blue);
    text-align: center;
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: block;
}

.trade-history-item .trade-area {
    color: #000;
    font-size: 12px;
}

/* 가격 토글 버튼 */
.trade-price-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.price-toggle-btn {
    flex: 1;
    /* 요청: 전용면적당단가가 길어도 버튼이 과하게 커지지 않게 */
    padding: 6px 6px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.price-toggle-btn:hover {
    background: #e8e8e8;
}

.price-toggle-btn.active {
    background: #1976d2;
    color: white;
    border-color: #1976d2;
}

/* 필터 모달 */
.filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.filter-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.filter-modal-content {
    position: relative;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 3px solid var(--ui-accent-border);
    min-width: 260px;
    /* 입력(최소~최대)이 잘리지 않도록 화면 폭에 맞춰 더 넓게 사용 */
    max-width: min(420px, calc(100vw - 30px));
    max-height: 80vh;
    overflow: auto;
    transform: scale(var(--ui-scale, 1));
    transform-origin: top left;
    /* 위치는 JS(ui.js)에서 검색/건축물 패널 간격을 기준으로 동적으로 배치합니다. */
    margin-top: 0;
    margin-left: 0;
}

.filter-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    background: var(--ui-header-bg);
    border-radius: 8px 8px 0 0;
}

.filter-modal-header h3 {
    margin: 0;
    font-size: 13px;
    color: #333;
}

.filter-modal-body {
    padding: 12px;
}

.filter-section {
    margin-bottom: 20px;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-section h4 {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #666;
    font-weight: 600;
}

.filter-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    justify-content: flex-end;
}

.filter-action-link {
    background: none;
    border: none;
    padding: 2px 0;
    color: #666;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: color 0.15s;
}

.filter-action-link:hover {
    color: #333;
}

.filter-action-icon {
    font-size: 12px;
}

.filter-button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.filter-type-btn {
    padding: 6px 8px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-align: center;
    transition: all 0.15s;
    position: relative;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.filter-type-btn:hover {
    opacity: 0.9;
}

.filter-type-btn[data-active="false"] {
    opacity: 0.35;
    filter: grayscale(100%);
}

.filter-type-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.35;
    filter: grayscale(100%);
    pointer-events: none;
}

.filter-type-btn[disabled]:hover {
    opacity: 0.35;
}

.filter-type-btn[data-active="true"] {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.4);
}

.filter-btn-label {
    position: relative;
    z-index: 1;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
}

.filter-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.filter-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.filter-item.disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.filter-value-range {
    margin: 10px 0 12px 0;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(247, 248, 250, 0.85);
    border-radius: 8px;
}

.filter-value-section + .filter-value-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.filter-value-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.filter-value-title {
    font-size: 12px;
    font-weight: 800;
    color: #111;
}

.filter-value-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 0 0 auto;
}

.filter-value-inputrow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
}

.filter-value-input {
    flex: 1 1 0;
    min-width: 0; /* 중요: flex 컨테이너에서 '잘림' 대신 축소 */
    padding: 6px 8px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    font-size: 12px;
    background: white;
}

.filter-value-sep {
    font-size: 12px;
    color: rgba(0,0,0,0.65);
    font-weight: 700;
}

.filter-value-hint {
    font-size: 11px;
    color: rgba(0,0,0,0.55);
    white-space: nowrap;
}

.filter-value-hintline {
    margin-top: 6px;
    font-size: 11px;
    color: rgba(0,0,0,0.55);
    white-space: nowrap;
}

.filter-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

/* 필터 버튼 패널 */
.filter-panel {
    position: absolute;
    /* 검색 패널 위에 위치 - JavaScript에서 동적으로 설정됨 */
    top: var(--ui-inset-y, 20px);
    left: var(--ui-inset-x, 20px);
    z-index: 11;
    background: white;
    padding: 8px 12px;
    border-radius: 8px;
    /* 아래로만 살짝 떨어지는 느낌(검색 패널과 붙어도 겹침 최소화) */
    box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.35);
    transform: scale(var(--ui-scale, 1));
    transform-origin: top left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.realestate-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    line-height: 1;
    padding: 6px 10px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(25,118,210,0.06);
    border-radius: 999px;
}

.realestate-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: #1976d2;
    vertical-align: middle;
}

.realestate-toggle span {
    vertical-align: middle;
    line-height: 16px;
}

.filter-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.realestate-price-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 2px;
}

/* 필터 패널 내 가격 모드 토글은 더 작고 컴팩트하게 */
.filter-panel .realestate-price-mode .price-toggle-btn {
    flex: 0 0 auto;
    padding: 6px 8px;
    font-size: 11px;
    border-radius: 999px;
    min-width: 54px;
    text-align: center;
}

.filter-panel .realestate-price-mode .price-toggle-btn.active {
    background: #1976d2;
    border-color: #1976d2;
    color: #fff;
}

.filter-icon-btn:hover {
    background: #e0e0e0;
    color: #333;
}

.filter-open-btn {
    padding: 10px 20px;
    background: #81C600;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.filter-open-btn:hover {
    background: #6EAA00;
}

/* 거래유형 토글 (매매/전세/월세) */
.trade-type-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 15px;
}

.trade-type-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.trade-type-btn:hover:not(:disabled) {
    background: #e8e8e8;
}

.trade-type-btn.active {
    background: #1976d2;
    color: white;
    border-color: #1976d2;
}

.trade-type-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 거래 요약 (최근 가격) */
.trade-summary {
    text-align: center;
    padding: 15px;
    /* 요청: 대표 실거래가 카드 배경은 하늘색 톤 */
    background: #d9ecff;
    border-radius: 8px;
    margin-bottom: 15px;
}

.trade-apt-name {
    font-size: 14px;
    color: #000;
    margin-bottom: 8px;
}

.trade-latest-price {
    /* 요청: 거래금액/면적 글자 크기를 기존의 2/3로 */
    font-size: 19px;
    font-weight: 700;
    /* 요청: 대표 금액은 '배경 없이' 파란 글자로만 강조 */
    color: var(--trade-price-blue);
    margin-bottom: 4px;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    padding: 0;
}

.trade-latest-date {
    font-size: 12px;
    color: #000;
}

/* 실거래가 마커(지도 위 말풍선): 금액 (최종 거래연도만) [+] 한 줄 */
.realestate-marker .marker-price-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* 면적당가격 모드: "작은 팝업" 느낌으로 더 컴팩트 */
.realestate-marker[data-price-mode="sqm"] {
    padding: 3px 6px;
}

.realestate-marker[data-price-mode="sqm"] .marker-price {
    font-size: 11px;
}

.realestate-marker[data-price-mode="sqm"] .marker-year {
    font-size: 10px;
}

.realestate-marker .marker-year {
    font-size: 10px;
    font-weight: 700;
    color: #111;
    opacity: 0.95;
}

.realestate-marker .marker-addcase {
    border: 1px solid rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.85);
    color: #111;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.realestate-marker .marker-addcase:hover {
    /* 요청: 필지정보처럼 "호버 시 회색"으로 클릭 가능함을 명확히 */
    background: #eef1f5;
    border-color: rgba(0,0,0,0.28);
}

/* 거래내역 섹션 */
.trade-detail-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* 내부 리스트(#tradeHistoryList)가 overflow로 스크롤 되도록 */
}

.trade-detail-section h4 {
    font-size: 13px;
    color: #000;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.trade-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.trade-detail-header h4 {
    margin: 0;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

.trade-detail-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.trade-action-btn {
    padding: 4px 8px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    color: #000;
}

.trade-action-btn:hover {
    background: #e8e8e8;
}

.trade-action-btn.active {
    border-color: var(--ui-accent-border);
    background: rgba(0, 176, 240, 0.12);
}

.trade-action-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.trade-filter-popover {
    margin: 0 0 8px 0;
    padding: 8px;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
}

.trade-filter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.trade-filter-label {
    font-size: 11px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}

.trade-filter-top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trade-filter-btn {
    padding: 4px 8px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    color: #000;
}

.trade-filter-btn:hover {
    background: #f2f2f2;
}

.trade-filter-btn.ghost {
    background: transparent;
}

.trade-area-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.trade-area-chip {
    padding: 5px 8px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 999px;
    font-size: 11px;
    cursor: pointer;
    color: #000;
    line-height: 1;
}

.trade-area-chip:hover {
    background: #f2f2f2;
}

.trade-area-chip.active {
    background: #1976d2;
    border-color: #1976d2;
    color: #fff;
}

.trade-area-chip:disabled {
    opacity: 0.6;
    cursor: default;
}

.streetview-marker {
    width: 24px;
    height: 24px;
    background: #4285F4;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* 토지 요약 테이블 패널 (Σ 버튼) */
.panel-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11; /* map < backdrop < toolbox(12) < modal(15) */
    background: rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: auto; /* 지도 클릭 방지 */
}

.land-summary-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
    z-index: 15;
    background: white;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    border: 3px solid var(--ui-accent-border);
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.land-summary-header {
    padding: 10px 14px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ui-header-bg);
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
    cursor: move;
}

.land-summary-header h3 {
    margin: 0;
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.land-summary-body {
    padding: 12px;
    overflow: auto;
    flex: 1;
}

.land-summary-table-wrapper {
    overflow-x: auto;
}

.land-summary-table {
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
    width: 100%;
}

.land-summary-table th,
.land-summary-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    line-height: 1.35;
    text-align: center;
    color: #000;
}

.land-summary-table td.land-summary-address-cell {
    text-align: center;
    /* 주소는 한 줄로 깔끔하게: "예시동 0000-0000" 형태가 줄바꿈 없이 들어가도록 */
    white-space: nowrap;
    min-width: 140px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.land-summary-table th {
    background: var(--ui-header-bg);
    font-weight: 700;
    text-align: center;
}

.land-summary-table th:first-child,
.land-summary-table td:first-child {
    text-align: center;
    background: var(--ui-header-bg);
    font-weight: 700;
    position: sticky;
    left: 0;
}


/* 주소 종합 정보 패널 */
.address-summary-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
    z-index: 15;
    background: white;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    border: 3px solid var(--ui-accent-border);
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.address-summary-header {
    padding: 10px 14px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ui-header-bg);
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
    cursor: move;
}

.address-summary-header h3 {
    margin: 0;
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.address-summary-body {
    padding: 12px;
    overflow: auto;
    flex: 1;
}

.address-summary-table-wrapper {
    overflow-x: auto;
}

.address-summary-table {
    border-collapse: collapse;
    font-size: 12px;
    /* 컬럼 폭을 일정하게 고정하고, 내용이 길면 줄바꿈으로 처리 */
    table-layout: fixed;
    width: max-content;
}

.address-summary-table th,
.address-summary-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    line-height: 1.35;
    text-align: center;
    color: #000;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.address-summary-table th {
    background: var(--ui-header-bg);
    font-weight: 700;
    text-align: center;
}

.address-summary-table th:first-child,
.address-summary-table td:first-child {
    /* 요청: 구분~2022까지(제목셀) 왼쪽 정렬 */
    text-align: left;
    background: var(--ui-header-bg);
    font-weight: 700;
    position: sticky;
    left: 0;
}

/* 요청: 2025~2022 제목셀은 2칸(들여쓰기) */
.address-summary-table td.as-year-label {
    padding-left: 24px; /* 기본 padding(12px) 대비 +12px */
}

/* 요청: 숫자 데이터(면적/비율/공시지가)는 우측 정렬 */
.address-summary-table td.as-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 주소 행(첫 번째 데이터 행): 각 컬럼 주소가 예쁘게 한 줄로 보이도록 폭 확보 */
.address-summary-table tbody tr:first-child td:not(:first-child) {
    /* 기준 문자열: "ㅇㅇㅇㅇ ㅇㅇㅇㅇ 000-00" 정도 길이로 고정 */
    min-width: 170px;
    max-width: 170px;
    width: 170px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
}

/* 모든 데이터 컬럼(1번~N번) 폭 고정 */
.address-summary-table th:not(:first-child),
.address-summary-table td:not(:first-child) {
    min-width: 170px;
    max-width: 170px;
    width: 170px;
}

/* 필지 클릭 조회 팝업 */
.parcel-info-popup {
    /* 측정 팝업(.measure-summary-popup)과 톤을 맞춤 */
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    /* 요청: 필지 커넥터(화살표) 컬러와 동일 톤으로 테두리 통일 */
    border: 3px solid #00B0F0;
    /* 닫기 버튼과 긴 텍스트가 겹치지 않도록 우측 패딩 확보 */
    padding: 8px 34px 8px 10px;
    width: auto;
    min-width: 240px;
    max-width: 720px;
    /* 리사이즈가 "툭 걸리는" 느낌을 줄이기 위한 여유 */
    min-height: 60px;
    max-height: 520px;
    font-size: 11px;
    position: relative;
    /* 요청: 실거래가(가격 라벨) 등 지도 오버레이 위로 */
    z-index: 9000;
    /* 팝업 드래그/리사이즈(모바일/터치 포함) */
    touch-action: none;
    box-sizing: border-box;
    overflow: hidden;
    /* 팝업 자체는 드래그 이동 UX를 유지하되, 주소 텍스트만 복사 가능하도록 예외 처리 */
    user-select: none;
}

/* 필지 연결선 화살표 머리(지도 오버레이 content로 사용) */
.parcel-connector-arrow {
    width: 0;
    height: 0;
    /* 요청: 지도 위에서도 확 눈에 띄게(채도/대비 강화) */
    /* 요청: 화살표 머리는 더 얇고 슬림하게 */
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 12px solid var(--arrow-color, #0068ff);
    transform: rotate(var(--arrow-rot, 0deg));
    /* 진한 외곽 + 그림자로 가독성 확보 */
    filter:
        drop-shadow(0 0 0.5px rgba(0,0,0,0.85))
        drop-shadow(0 2px 3px rgba(0,0,0,0.55));
    pointer-events: none;
}

.parcel-info-address {
    /* 측정 결과 팝업(.measure-summary-popup .distance)과 동일 톤 */
    font-size: 11px;
    font-weight: 600;
    color: var(--ui-accent-border, #2b6fff);
    margin-bottom: 4px;
    padding: 0;
    background: transparent;
    border-bottom: none;
    border-radius: 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
    /* 주소가 길면 줄바꿈(닫기 버튼과 겹침 방지) */
    white-space: normal;
}

.parcel-info-popup.dragging .parcel-info-address {
    cursor: default;
}

.parcel-info-address-text {
    flex: 1 1 auto;
    cursor: text;
    user-select: text;
}

/* NOTE: 필지 정보 팝업은 리사이즈 기능 제거 */
.parcel-info-resize-handle { display: none; }

.parcel-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

/* 필지 클릭 팝업: 검색 결과 요약처럼 한 줄 요약 */
.parcel-info-summary {
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    color: #666;
}

.parcel-info-label {
    color: #666;
    font-weight: 500;
}

.parcel-info-value {
    color: #333;
    font-weight: 600;
    text-align: right;
}

.parcel-info-value.parcel-owner {
    color: #d32f2f;
}

.parcel-info-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0;
}

.parcel-info-close:hover {
    background: rgba(0,0,0,0.06);
    color: #333;
}

.parcel-info-addcase {
    /* 실거래가 마커의 [+] 버튼과 동일 톤 */
    border: 1px solid rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.85);
    color: #111;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    flex: 0 0 auto;
}

.parcel-info-addcase:hover {
    background: #eef1f5;
}

/* "본건과의 거리" 팝업(경로/직선) 아이콘 정렬 */
.measure-summary-popup .route-row {
    display: flex;
    align-items: center;
    justify-content: center; /* 요청: 각 행 중앙정렬 */
    gap: 8px;
}

.measure-summary-popup .route-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
}

.measure-summary-popup .route-icon-text {
    font-size: 14px;
    line-height: 1;
    color: #1A73E8;
}

/* 요청: 직선거리/이동거리는 파란색 */
.measure-summary-popup .route-distance {
    color: #1A73E8;
    font-weight: 700;
    min-width: 64px;
    text-align: center;
}

/* 소요시간은 우측 컬럼 느낌으로(중앙정렬 유지) */
.measure-summary-popup .route-duration {
    color: #333;
    font-weight: 600;
    min-width: 64px;
    text-align: center;
}