/* v7/locale/real_estate/list.css — 다국어 부동산 매물 목록 페이지 스타일
 *
 * 필고 v7 디자인 테마(Web Awesome Pro 변수 + Font Awesome 7) 그대로 사용
 * Bootstrap 미사용, 다크 모드 미적용 (라이트 전용)
 */

.locale-re-list-page {
    padding: 1.5rem 1rem 3rem;
}
.locale-re-list-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* ─────── 헤드 ─────── */
.locale-re-list-head {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background:
        radial-gradient(ellipse at top right, rgba(30, 64, 175, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, var(--surface-card, #ffffff) 0%, var(--surface-elevated, #fafafa) 100%);
    border: 1px solid var(--border, #e5ddd9);
    border-radius: 16px;
}
.locale-re-list-title {
    margin: 0 0 0.375rem;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--text-primary, #1a1a1a);
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}
@media (max-width: 768px) {
    .locale-re-list-title { font-size: 1.5rem; }
    .locale-re-list-head { padding: 1rem 1.125rem; border-radius: 12px; }
}
.locale-re-list-title i {
    color: var(--philgo-red-800, #7a1d22);
}
.locale-re-list-count {
    margin: 0;
    color: var(--text-secondary, #4a4a4a);
    font-size: 0.9375rem;
    font-weight: 500;
}

/* ─────── 결과 메타 (Iter 47, R2 Iter 32 따뜻한 톤) ─────── */
.locale-re-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
    color: var(--text-secondary, #4a4a4a);
    font-size: 0.875rem;
}
.locale-re-list-meta-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.375rem 0.875rem;
    background: var(--philgo-red-50, #fdf2f2);
    color: var(--philgo-red-900, #5f1518);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.875rem;
}
.locale-re-list-meta-count i {
    font-size: 0.8125rem;
}
.locale-re-list-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary, #4a4a4a);
    font-weight: 500;
}
.locale-re-list-meta-item i {
    color: var(--text-muted, #6b6b6b);
    font-size: 0.8125rem;
}
@media (max-width: 480px) {
    .locale-re-list-meta {
        font-size: 0.8125rem;
        gap: 0.375rem 0.625rem;
    }
    .locale-re-list-meta-count {
        padding: 0.3125rem 0.75rem;
        font-size: 0.8125rem;
    }
}

/* ─────── 검색 필터 — 항상 노출 (R2 redesign) ─────── */
.locale-re-list-filter-wrap {
    margin-bottom: 1.5rem;
}
.locale-re-list-filter {
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--border, #e5ddd9);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
/* 결과 메타 정렬 select (R2 Iter 16/17) */
.locale-re-list-meta-sort {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary, #4a4a4a);
    font-size: 0.875rem;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .locale-re-list-meta-sort {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%;
        justify-content: flex-start;
    }
    .locale-re-list-meta-sort select { flex: 1; min-width: 0; }
}
.locale-re-list-meta-sort > i {
    color: var(--text-muted, #6b6b6b);
    font-size: 0.8125rem;
}
.locale-re-list-meta-sort select {
    border: 1px solid var(--border, #e5ddd9);
    background: var(--surface-card, #ffffff);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-primary, #1a1a1a);
    cursor: pointer;
}
.locale-re-list-meta-sort select:hover,
.locale-re-list-meta-sort select:focus {
    border-color: var(--philgo-red-800, #7a1d22);
    outline: none;
}

/* 상세 필터 details (R2 Iter 9) */
.locale-re-list-filter-advanced {
    margin-top: 0.75rem;
    border-top: 1px solid var(--border, #e5ddd9);
    padding-top: 0.75rem;
}
.locale-re-list-filter-advanced-summary {
    cursor: pointer;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-secondary, #4a4a4a);
    border-radius: 8px;
    background: var(--surface-elevated, #fafafa);
    border: 1px solid var(--border, #e5ddd9);
    list-style: none;
    user-select: none;
    transition: border-color 0.15s, color 0.15s;
}
.locale-re-list-filter-advanced-summary:hover {
    border-color: var(--philgo-red-800, #7a1d22);
    color: var(--philgo-red-800, #7a1d22);
}
.locale-re-list-filter-advanced-summary::-webkit-details-marker { display: none; }
.locale-re-list-filter-advanced-summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.15s;
}
.locale-re-list-filter-advanced[open] .locale-re-list-filter-advanced-summary::before {
    transform: rotate(90deg);
}
.locale-re-list-filter-advanced[open] .locale-re-list-filter-advanced-summary {
    color: var(--philgo-red-800, #7a1d22);
}
.locale-re-list-filter-advanced > .locale-re-list-filter-row,
.locale-re-list-filter-advanced > .locale-re-list-filter-group {
    margin-top: 0.875rem;
}
.locale-re-list-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.locale-re-list-filter-group + .locale-re-list-filter-group,
.locale-re-list-filter-group + .locale-re-list-filter-row,
.locale-re-list-filter-row + .locale-re-list-filter-group {
    margin-top: 0.875rem;
}
.locale-re-list-filter-group-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted, #6b6b6b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-left: 0.125rem;
}

/* 체크박스 필터 (R2 Iter 10 — pill 토글) */
.locale-re-list-filter-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.locale-re-list-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--text-secondary, #4a4a4a);
    background: var(--surface-elevated, #fafafa);
    border: 1px solid var(--border, #e5ddd9);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.locale-re-list-filter-check:hover {
    border-color: var(--philgo-red-800, #7a1d22);
    color: var(--philgo-red-800, #7a1d22);
}
.locale-re-list-filter-check input {
    accent-color: var(--philgo-red-800, #7a1d22);
    cursor: pointer;
    margin: 0;
}
.locale-re-list-filter-check:has(input:checked) {
    background: var(--philgo-red-800, #7a1d22);
    border-color: var(--philgo-red-800, #7a1d22);
    color: #ffffff;
}
.locale-re-list-filter-check:has(input:checked) input { accent-color: #ffffff; }

/* 모바일 상세 필터 row: 4개 input 한 행 → 2열 (R2 Iter 10) */
@media (max-width: 640px) {
    .locale-re-list-filter-advanced > .locale-re-list-filter-row .locale-re-list-filter-input {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }
    .locale-re-list-filter-checks { gap: 0.375rem; }
    .locale-re-list-filter-check { padding: 0.3125rem 0.75rem; font-size: 0.75rem; }
}

.locale-re-list-filter-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.locale-re-list-filter-input {
    flex: 1 1 200px;
    padding: 0.625rem 0.875rem;
    background: #ffffff;
    border: 1px solid var(--border, #e5ddd9);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--text-primary, #1a1a1a);
    line-height: 1.4;
    min-height: 44px;  /* iOS tap target 44px */
}
.locale-re-list-filter-input.is-active,
.locale-re-list-filter-input:focus {
    border-color: var(--philgo-red-800, #7a1d22);
    outline: none;
}
/* 모바일: select가 너무 좁아 보이는 문제 해결 — 100% 폭 */
@media (max-width: 480px) {
    .locale-re-list-filter-input {
        flex: 1 1 100%;
    }
}
.locale-re-list-filter-input:focus {
    outline: none;
    border-color: var(--philgo-red-800, #7a1d22);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.locale-re-list-filter-q {
    flex-basis: 100%;
}
.locale-re-list-filter-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

/* ─────── 활성 필터 chip ─────── */
.locale-re-list-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.625rem 0.75rem;
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--border, #e5ddd9);
    border-radius: 8px;
}
.locale-re-list-chips-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary, #4a4a4a);
    font-size: 0.8125rem;
    font-weight: 600;
}
.locale-re-list-chips-label i {
    color: var(--philgo-red-800, #7a1d22);
}
.locale-re-list-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--philgo-red-50, #fdf2f2);
    color: var(--philgo-red-900, #5f1518);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.15s;
}
.locale-re-list-chip:hover {
    background: var(--wa-color-brand-90, var(--philgo-red-50, #fdf2f2));
    color: var(--philgo-red-900, #5f1518);
}
.locale-re-list-chip i {
    font-size: 0.6875rem;
    opacity: 0.7;
}
.locale-re-list-chips-clear {
    margin-left: auto;
    color: var(--philgo-red-700, #98242b);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
}
.locale-re-list-chips-clear:hover {
    color: var(--philgo-red-700, #98242b);
    text-decoration: underline;
}

/* ─────── 매물 그리드 ─────── */
.locale-re-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 480px) {
    .locale-re-list-grid { gap: 1rem; }
}
@media (min-width: 768px) {
    .locale-re-list-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}
/* 매우 작은 모바일에서도 1단 강제는 피하고 (2단 유지) 폰트만 축소 */
@media (max-width: 380px) {
    .locale-re-card-price {
        font-size: 1rem;
    }
    .locale-re-card-meta {
        font-size: 0.75rem;
    }
}

/* ─────── 매물 카드 ─────── */
.locale-re-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    border: 1px solid var(--border, #e5ddd9);
}
.locale-re-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.12);
    border-color: var(--philgo-red-800, #7a1d22);
    color: inherit;
}
.locale-re-card:active {
    transform: scale(0.98);
}
.locale-re-card-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-elevated, #fafafa);
    overflow: hidden;
}
.locale-re-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 시드 PNG에만 zoom 적용 — 진짜 사진(webp/jpg)은 잘리지 않게 (R2 Iter 46) */
.locale-re-card-photo img[src$=".png"] {
    object-position: center top;
    transform: scale(1.35);
    transform-origin: center top;
}
.locale-re-card-no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-elevated, #fafafa);
    color: var(--text-muted, #6b6b6b);
    font-size: 0.8125rem;
    gap: 0.5rem;
}
.locale-re-card-no-photo i {
    font-size: 2rem;
    color: var(--border-strong, #d4c8c0);
}
.locale-re-card-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.3125rem 0.75rem;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.locale-re-card-badge-s { background: #16a34a; }  /* Sale - 녹색 */
.locale-re-card-badge-r { background: #525252; }  /* Rent - 슬레이트 (brand 충돌 회피) */
.locale-re-card-badge-t { background: #ea580c; }  /* Rent-to-Own - 주황색 */

/* NEW 배지: shell.css로 이동 (index.php + list.php 공용 — Iter 68) */

/* 카드 조회수: shell.css로 이동 (Iter 70 — index.php + list.php 공용) */

/* ─────── 가격대 빠른 chip (Iter 74) ─────── */
.locale-re-list-price-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.625rem 0.875rem;
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--border, #e5ddd9);
    border-radius: 12px;
}
.locale-re-list-price-chips-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary, #4a4a4a);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-right: 0.25rem;
}
.locale-re-list-price-chips-label i {
    color: var(--philgo-red-800, #7a1d22);
}
.locale-re-list-price-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.75rem;
    background: var(--surface-elevated, #fafafa);
    border: 1px solid var(--border, #e5ddd9);
    border-radius: 999px;
    color: var(--text-secondary, #4a4a4a);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.locale-re-list-price-chip:hover {
    background: var(--philgo-red-50, #fdf2f2);
    color: var(--philgo-red-900, #5f1518);
}
.locale-re-list-price-chip.is-active {
    background: var(--philgo-red-800, #7a1d22);
    color: #ffffff;
    border-color: var(--philgo-red-800, #7a1d22);
}
@media (max-width: 480px) {
    .locale-re-list-price-chips { padding: 0.5rem 0.75rem; gap: 0.375rem; }
    .locale-re-list-price-chip { font-size: 0.75rem; padding: 0.25rem 0.625rem; }
}

/* 카드 우측 상단 즐겨찾기 버튼 */
.locale-re-card-fav {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-muted, #6b6b6b);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    padding: 0;
    transition: all 0.15s;
    backdrop-filter: blur(4px);
}
.locale-re-card-fav:hover {
    background: #ffffff;
    color: var(--philgo-red-800, #7a1d22);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.locale-re-card-fav.is-active {
    background: #ffffff;
    color: var(--philgo-red-800, #7a1d22);
}
.locale-re-card-fav:disabled {
    opacity: 0.6;
    cursor: wait;
}

.locale-re-card-body {
    padding: 1rem 1.125rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* ─────── 카드 폰트 강화 (R2 redesign — 가독성 우선) ─────── */
.locale-re-card-price {
    font-size: 1.5rem;      /* 24px — 가격 강조 */
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.locale-re-card-price-unit {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}
.locale-re-card-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    align-items: center;
    line-height: 1.4;
}
.locale-re-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
}
.locale-re-card-meta i {
    color: var(--philgo-red-800);
    font-size: 0.875rem;
}
.locale-re-card-location {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    padding-top: 0.125rem;
}
.locale-re-card-location i {
    color: var(--philgo-red-800);
    font-size: 0.9375rem;
    flex-shrink: 0;
}

/* ─────── 빈 상태 (Iter 46 강화) ─────── */
/* 빈 결과 (Iter 46 / R2 Iter 24/26 — 다크 레드 톤 + 모바일 RWD) */
.locale-re-list-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--border, #e5ddd9);
    border-radius: 12px;
    color: var(--text-muted, #6b6b6b);
}
@media (max-width: 640px) {
    .locale-re-list-empty { padding: 1.75rem 1rem; }
}
.locale-re-list-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-elevated, #fafafa);
    border-radius: 50%;
}
.locale-re-list-empty-icon i {
    font-size: 1.75rem;
    color: var(--border-strong, #d4c8c0);
}
.locale-re-list-empty-title {
    margin: 0 0 0.375rem;
    color: var(--text-primary, #1a1a1a);
    font-size: 1.0625rem;
    font-weight: 700;
}
.locale-re-list-empty-keyword {
    margin: 0 0 0.5rem;
    color: var(--text-secondary, #4a4a4a);
    font-size: 0.875rem;
}
.locale-re-list-empty-keyword strong {
    color: var(--philgo-red-800, #7a1d22);
    font-weight: 700;
}
.locale-re-list-empty-desc {
    margin: 0;
    color: var(--text-muted, #6b6b6b);
    font-size: 0.8125rem;
    font-weight: 400;
}
.locale-re-list-empty-action {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}
.locale-re-list-empty-suggest {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--border, #e5ddd9);
}
.locale-re-list-empty-suggest-label {
    display: block;
    color: var(--text-muted, #6b6b6b);
    font-size: 0.75rem;
    margin-bottom: 0.625rem;
    font-weight: 600;
}
.locale-re-list-empty-cities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.locale-re-list-empty-city {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    background: var(--surface-elevated, #fafafa);
    border: 1px solid var(--border, #e5ddd9);
    border-radius: 999px;
    color: var(--text-secondary, #4a4a4a);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.locale-re-list-empty-city i {
    color: var(--philgo-red-800, #7a1d22);
    font-size: 0.75rem;
}
.locale-re-list-empty-city:hover {
    background: var(--philgo-red-50, #fdf2f2);
    border-color: var(--philgo-red-800, #7a1d22);
    color: var(--philgo-red-800, #7a1d22);
}
.locale-re-list-empty-city:hover {
    background: var(--philgo-red-50, #fdf2f2);
    border-color: var(--philgo-red-800, #7a1d22);
    color: var(--philgo-red-900, #5f1518);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);
}

/* ─────── 페이지네이션 (R2 Iter 18 — 다크 레드 + 따뜻한 톤) ─────── */
.locale-re-list-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, #e5ddd9);
}
.locale-re-list-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--border, #e5ddd9);
    border-radius: 6px;
    color: var(--text-primary, #1a1a1a);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
}
.locale-re-list-page-btn:hover {
    border-color: var(--philgo-red-800, #7a1d22);
    color: var(--philgo-red-800, #7a1d22);
    background: var(--philgo-red-50, #fdf2f2);
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.08);
}
.locale-re-list-page-btn:focus-visible {
    outline: 2px solid var(--philgo-red-800, #7a1d22);
    outline-offset: 2px;
}
.locale-re-list-page-btn.is-disabled {
    color: var(--border-strong, #d4c8c0);
    cursor: not-allowed;
    background: var(--surface-elevated, #fafafa);
}
.locale-re-list-page-current {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--philgo-red-800, #7a1d22);
    font-weight: 700;
    padding: 0.3125rem 0.75rem;
    background: var(--philgo-red-50, #fdf2f2);
    border-radius: 6px;
}