/* V2 Map - 부동산정보 패널 */

.realestate-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── 가이드 ── */
.re-guide { padding: 12px 14px; overflow-y: auto; flex: 1; }
.re-guide.re-guide-compact {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.re-guide-hero {
    text-align: center;
    padding: 10px 0 6px;
}
.re-guide-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    margin-bottom: 10px;
}
.re-guide-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(25,118,210,0.3);
    animation: rePulse 2s ease-out infinite;
}
@keyframes rePulse {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 0; }
}
.re-guide-title { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 3px; }
.re-guide-sub { font-size: 11.5px; color: #888; line-height: 1.5; }

.re-guide-cards { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.re-guide-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; background: #fff; border: 1px solid #f0f0f0; border-radius: 8px;
    transition: border-color .15s;
}
.re-guide-card:hover { border-color: #BBDEFB; }
.re-guide-card-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.re-guide-card-text { display: flex; flex-direction: column; gap: 1px; }
.re-guide-card-text strong { font-size: 12px; font-weight: 700; color: #333; }
.re-guide-card-text span { font-size: 10.5px; color: #999; line-height: 1.4; }

.re-guide-steps { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.re-guide-step {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: #555; padding: 4px 0;
}
.re-guide-step-num {
    width: 20px; height: 20px; border-radius: 50%;
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB); color: #1976D2;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.re-guide-notes { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.re-guide-note {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 11px; color: #666; line-height: 1.5;
}
.re-guide-note strong { color: #1976D2; }
.re-guide-footer {
    display: flex; align-items: center; gap: 5px;
    padding: 10px 0; margin-top: 10px;
    border-top: 1px solid #f0f0f0;
    font-size: 10px; color: #bbb;
}

/* ── 탭 (고정) ── */
.re-tabs {
    display: flex;
    padding: 0 8px;
    background: #fafafa;
    border-bottom: 2px solid #f0f0f0;
    flex-shrink: 0;
}
.re-tab {
    display: flex; align-items: center; gap: 4px;
    padding: 10px 14px 9px;
    font-size: 12px; font-weight: 600;
    color: #999;
    background: none; border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -2px;
    flex: 1;
    justify-content: center;
}
.re-tab:hover { color: #666; }
.re-tab.active { color: #1976D2; border-bottom-color: #1976D2; }
.re-tab.active svg { stroke: #1976D2; }

/* ── 탭 콘텐츠 (flex 확장, 내부에서 스크롤 처리) ── */
.re-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── 검색 폼 (고정) ── */
.re-search {
    padding: 12px 14px;
    background: #f9fafb;
    border-bottom: 1px solid #f0f0f0;
    display: flex; flex-direction: column; gap: 8px;
    flex-shrink: 0;
}
.re-search-row { display: flex; gap: 6px; align-items: center; }
.re-select {
    flex: 1; height: 32px; padding: 0 8px;
    font-size: 12px; border: 1px solid #ddd; border-radius: 6px;
    background: #fff; color: #333; outline: none;
}
.re-select:focus { border-color: #1976D2; }
.re-select:disabled { background: #f5f5f5; color: #aaa; }
.re-select-sm {
    height: 28px; padding: 0 6px; font-size: 11px;
    border: 1px solid #e0e0e0; border-radius: 4px;
    background: #fff; color: #555; outline: none;
}
.re-input-month, .re-input-date {
    flex: 1; height: 32px; padding: 0 8px;
    font-size: 12px; border: 1px solid #ddd; border-radius: 6px;
    background: #fff; color: #333; outline: none;
}
.re-input-month:focus, .re-input-date:focus { border-color: #1976D2; }
.re-input-text {
    flex: 1; height: 32px; padding: 0 10px;
    font-size: 12px; border: 1px solid #ddd; border-radius: 6px;
    background: #fff; color: #333; outline: none;
}
.re-input-text:focus { border-color: #1976D2; }
.re-input-text::placeholder { color: #bbb; }
.re-date-sep { font-size: 12px; color: #999; flex-shrink: 0; }
.re-btn-search {
    height: 32px; padding: 0 16px;
    font-size: 12px; font-weight: 600; color: #fff;
    background: #1976D2; border: none; border-radius: 6px;
    cursor: pointer; white-space: nowrap;
    transition: background 0.2s; flex-shrink: 0;
}
.re-btn-search:hover { background: #1565C0; }
.re-btn-search:disabled { background: #bbb; cursor: default; }

/* ── 결과 영역 (스크롤) ── */
.re-result-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.re-result-scroll::-webkit-scrollbar { width: 3px; }
.re-result-scroll::-webkit-scrollbar-track { background: transparent; }
.re-result-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
.re-result-scroll:hover::-webkit-scrollbar-thumb { background: #bbb; }

/* ── 로딩 / 빈 ── */
.re-loading {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; padding: 60px 0;
    color: #999; font-size: 12px;
}
.re-loading-spinner {
    width: 24px; height: 24px;
    border: 3px solid #e0e0e0; border-top-color: #1976D2;
    border-radius: 50%;
    animation: reSpin 0.7s linear infinite;
}
@keyframes reSpin { to { transform: rotate(360deg); } }

.re-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; padding: 50px 20px;
    text-align: center; font-size: 12px; color: #999;
}

/* ── 실거래가: 통계 → .re-trade-summary로 이동 ── */

.re-sort-bar {
    display: flex; align-items: center;
    padding: 6px 14px; border-bottom: 1px solid #f5f5f5;
}

/* ── 실거래가: 카드 리스트 ── */
.re-trade-list {
    padding: 0;
    display: flex; flex-direction: column; gap: 0;
}
.re-trade-card {
    padding: 10px 12px; background: #fff;
    border: 1px solid #f0f0f0; border-radius: 8px;
    transition: border-color 0.15s;
}
.re-trade-card:hover { border-color: #90CAF9; }
.re-trade-card.canceled { opacity: 0.5; border-left: 3px solid #ef5350; }

.re-trade-card-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.re-trade-apt {
    font-size: 13px; font-weight: 700; color: #333;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
}
.re-trade-price { font-size: 14px; font-weight: 700; color: #1976D2; white-space: nowrap; }
.re-trade-price small { font-size: 10px; font-weight: 400; color: #999; margin-left: 2px; }

.re-trade-card-mid {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: #888; margin-bottom: 6px;
}
.re-trade-card-bot {
    display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: #666;
}
.re-trade-card-bot span { position: relative; padding-right: 8px; }
.re-trade-card-bot span:not(:last-child)::after {
    content: '·'; position: absolute; right: 0; color: #ddd;
}
.re-trade-card-extra { display: flex; gap: 4px; margin-top: 6px; }

.re-badge-cancel {
    font-size: 10px; font-weight: 600; padding: 1px 6px;
    border-radius: 8px; background: #ffebee; color: #c62828;
}
.re-badge-type {
    font-size: 10px; font-weight: 500; padding: 2px 6px;
    border-radius: 8px; background: #f3e5f5; color: #7B1FA2;
}
.re-badge-agent {
    font-size: 10px; font-weight: 500; padding: 2px 6px;
    border-radius: 8px; background: #f5f5f5; color: #666;
}

/* ── 청약: 헤더 + 리스트 ── */
.re-cheongya-header {
    padding: 8px 14px; font-size: 12px; color: #666;
    border-bottom: 1px solid #f0f0f0;
}
.re-cheongya-header strong { color: #1976D2; }

.re-cheongya-list {
    padding: 6px 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.re-cheongya-card {
    padding: 12px 14px; background: #fff;
    border: 1px solid #f0f0f0; border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.re-cheongya-card:hover {
    border-color: #90CAF9;
    box-shadow: 0 2px 8px rgba(25,118,210,0.08);
}
.re-cheongya-card.re-card-active {
    border-color: #1976D2;
    box-shadow: 0 0 0 1px #1976D2;
}
.re-cheongya-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.re-cheongya-name {
    font-size: 14px; font-weight: 700; color: #333;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-badge-house {
    font-size: 9px; font-weight: 600; padding: 2px 6px;
    border-radius: 8px; background: #E3F2FD; color: #1976D2;
    white-space: nowrap; flex-shrink: 0;
}
.re-cheongya-card-addr {
    font-size: 11px; color: #888; margin-bottom: 8px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-cheongya-card-info { display: flex; flex-direction: column; gap: 3px; }
.re-cheongya-info-item { display: flex; gap: 8px; font-size: 11px; }
.re-info-label { color: #999; font-weight: 500; min-width: 55px; flex-shrink: 0; }
.re-info-value { color: #333; }
.re-cheongya-card-actions {
    display: flex; gap: 6px; margin-top: 10px;
    padding-top: 8px; border-top: 1px solid #f5f5f5;
}
.re-btn-detail {
    height: 28px; padding: 0 12px;
    font-size: 11px; font-weight: 600; color: #1976D2;
    background: #E3F2FD; border: none; border-radius: 6px;
    cursor: pointer; transition: background 0.15s;
}
.re-btn-detail:hover { background: #BBDEFB; }
.re-btn-link {
    height: 28px; padding: 0 12px;
    font-size: 11px; font-weight: 500; color: #666;
    background: #f5f5f5; border: none; border-radius: 6px;
    cursor: pointer; text-decoration: none;
    display: flex; align-items: center;
    transition: background 0.15s;
}
.re-btn-link:hover { background: #eee; }

/* ── 주택형별 상세 ── */
.re-model-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: #f9fafb;
    border-bottom: 1px solid #f0f0f0;
}
.re-btn-back {
    font-size: 11px; font-weight: 600; color: #1976D2;
    background: none; border: none; cursor: pointer; padding: 0;
}
.re-btn-back:hover { text-decoration: underline; }
.re-model-name {
    font-size: 13px; font-weight: 700; color: #333;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-model-list {
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.re-model-card {
    padding: 10px 12px; background: #fff;
    border: 1px solid #f0f0f0; border-radius: 8px;
}
.re-model-card-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.re-model-type { font-size: 13px; font-weight: 700; color: #333; }
.re-model-price { font-size: 13px; font-weight: 700; color: #1976D2; }
.re-model-price small { font-size: 10px; font-weight: 400; color: #999; }
.re-model-card-info {
    display: flex; flex-wrap: wrap; gap: 8px;
    font-size: 11px; color: #666; margin-bottom: 4px;
}
.re-model-card-special { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.re-badge-sp {
    font-size: 10px; font-weight: 600; padding: 2px 8px;
    border-radius: 10px; background: #FFF3E0; color: #E65100;
}
.re-model-card-extra {
    font-size: 11px; color: #888; margin-top: 6px;
    padding-top: 6px; border-top: 1px solid #f5f5f5;
}

/* ── 푸터 (고정) ── */
.re-footer {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 14px; border-top: 1px solid #f0f0f0;
    font-size: 10px; color: #bbb;
    flex-shrink: 0;
}

/* ── 통계 요약 고정 영역 ── */
#reTradeFixed {
    flex-shrink: 0;
}

/* ── 통계 요약 (1줄 평균 + 최고/최저 칩) ── */
.re-trade-summary {
    padding: 10px 14px;
    background: linear-gradient(135deg, #E3F2FD, #fff);
    border-bottom: 1px solid #e8e8e8;
}
.re-trade-summary-top {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.re-trade-location { font-size: 13px; font-weight: 700; color: #1976D2; }
.re-trade-period { font-size: 11px; color: #888; }
.re-trade-avg {
    font-size: 12px; color: #555;
    margin-bottom: 8px;
}
.re-trade-avg strong { color: #1976D2; font-weight: 700; }
.re-trade-minmax {
    display: flex; gap: 6px;
}
.re-stat-chip {
    display: inline-flex; align-items: center;
    padding: 4px 12px;
    font-size: 11px; font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.re-stat-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.re-stat-high {
    background: #FFF3E0; color: #E65100;
    border: 1px solid #FFE0B2;
}
.re-stat-low {
    background: #E8F5E9; color: #2E7D32;
    border: 1px solid #C8E6C9;
}

/* ── 동별 그룹핑 (아코디언) ── */
.re-dong-group { border-bottom: 1px solid #f0f0f0; }
.re-dong-header {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.re-dong-header:hover { background: #fafafa; }
.re-dong-chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
    color: #bbb;
}
.re-dong-group.open .re-dong-chevron { transform: rotate(0deg); }
.re-dong-group:not(.open) .re-dong-chevron { transform: rotate(-90deg); }
.re-dong-name { font-size: 12px; font-weight: 700; color: #333; }
.re-dong-count {
    font-size: 10px; font-weight: 600; color: #1976D2;
    background: #E3F2FD; padding: 1px 6px; border-radius: 8px;
}
.re-dong-avg {
    margin-left: auto;
    font-size: 10px; color: #999;
}
.re-dong-body {
    padding: 0 10px 8px;
    display: flex; flex-direction: column; gap: 6px;
}
.re-dong-group:not(.open) .re-dong-body { display: none; }

/* ── 카드 클릭/활성 ── */
.re-trade-card { cursor: pointer; }
.re-trade-card.re-card-active {
    border-color: #1976D2;
    box-shadow: 0 0 0 1px #1976D2;
}

/* ── 플래시 애니메이션 (통계→카드 스크롤) ── */
@keyframes reFlash {
    0%   { box-shadow: 0 0 0 0 rgba(25,118,210,0.5); }
    50%  { box-shadow: 0 0 0 4px rgba(25,118,210,0.3); }
    100% { box-shadow: 0 0 0 0 rgba(25,118,210,0); }
}
.re-trade-card.re-flash {
    animation: reFlash 1s ease-out;
    border-color: #1976D2;
}

/* ── 위치 정확도 토스트 알림 ── */
.re-toast {
    position: fixed;
    top: 70px;
    left: 55%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 18px;
    background: rgba(33, 33, 33, 0.92);
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.6;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity 0.35s, transform 0.35s;
    pointer-events: auto;
}
.re-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.re-toast svg {
    flex-shrink: 0;
    margin-top: 2px;
    stroke: #FFB74D;
}
.re-toast strong { color: #FFB74D; }
.re-toast a {
    color: #64B5F6;
    text-decoration: underline;
    font-weight: 600;
}
.re-toast a:hover { color: #90CAF9; }