/* ==========================
   셀렉트 박스 및 설정 레이어
========================== */

#custom-select {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.15rem 0.3rem;
    font-size: 0.75rem;
    background-color: #f8f9fa;
    color: #495057;
    width: 200px;
}

#custom-select:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}


/* ==========================
   단지 선택 레이어 스타일
========================== */
#estate-layer .form-check-label {
    font-size: 0.85rem;
    text-align: left;
    width: 100%;
    display: inline-block;
}

#estate-layer-header {
    position: sticky;
    top: -10px;
    height: 50px;
    background-color: #fff;
    z-index: 1060;
    padding-bottom: 3px;
    border-bottom: 1px solid #dee2e6;
}


/* ✅ 단지 선택 레이어가 단지 선택 박스 아래에 위치하도록 조정 */
#estate-layer {
    position: absolute;
    top: 100%; /* 선택 박스 바로 아래로 배치 */
    left: 10px; /* 선택 박스와 정렬 */
    width: 95%; /* 부모 요소의 너비를 따름 */
    max-width: 95%;
    max-height: 400px;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #dee2e6;
    background-color: #fff;
    z-index: 1100;
    display: none; /* 기본적으로 숨김 */
    flex-direction: column;
}

/* ✅ 단지 선택 레이어 내부 스타일 */
#estate-layer .card-body {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    max-height: 350px;
    flex-grow: 1;
}

/* ✅ 단지 선택 박스 스타일 */
#estate-select-box {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    background-color: #fff;
    color: #212529;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* ✅ 반응형 처리 */
@media (max-width: 768px) {
    #estate-layer {
        width: 100%; /* 작은 화면에서도 선택 박스와 너비 일치 */
    }
}

/* =======================================================
   1. 기본 카드 스타일 (General Card Style)
   ======================================================= */
.card {
    border-radius: 12px;
    margin-bottom: 20px; /* 카드 간 여백 확보 */
    /* 필요에 따라 box-shadow, transition 등을 추가할 수 있습니다. */
}

/* ⭐️ 반영 수정 1: 카드 헤더 내부 콘텐츠의 좌우 여백을 늘려 테두리로부터 분리 */
.card-header {
    /* Bootstrap 기본 패딩보다 크게 설정하여 카드 좌우 여백 확보 */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ⭐️ 반영 수정 2: 단지명 (aptName) <h5> 태그 스타일링 */
.card-header h5 {
    /* 기존 padding: 2px 5px; 는 제거하고 마진으로 뱃지와의 간격 확보 */
    margin-right: 10px; /* 오른쪽 뱃지와의 간격 확보 */
    /* Bootstrap의 mb-0 클래스를 사용하므로, margin-bottom은 별도로 필요 없습니다. */
}

/* ⭐️ 반영 수정 3: 거래 건수 뱃지 스타일링 */
.card-header .badge {
    /* 뱃지 내부 텍스트 여백을 넉넉히 주어 시원하게 표시 */
    padding: 8px 12px;
    /* 단지명 h5와의 간격을 확보하는 margin-left */
    margin-left: 5px;
}
.month{
    font-size: 0.85rem !important;
    font-weight: 400 !important;
}
/* =======================================================
   2. 모바일 최적화 (@media for screens <= 768px)
   ======================================================= */
@media (max-width: 768px) {

    /* 2.1 상단 요약 카드 여백 및 폰트 크기 조정 */
    .card.bg-primary, .card.bg-success, .card.bg-danger, .card.bg-warning {
        padding: 0.8rem !important; /* 내부 패딩 축소 */
    }

    /* 카드 제목 (h6) 크기 및 마진 조정 */
    .card h6 {
        font-size: 0.85rem !important;
        margin-bottom: 0.2rem !important; /* 제목 아래 마진 최소화 */
    }

    /* 금액 표시 (h4) 크기 및 마진 조정 */
    .card h4 {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        margin-bottom: 0 !important;
    }
    .card h4 small {
        font-size: 0.65rem !important;
    }

    /* 파란색 카드 (총 거래 건수 카드) 특수 조정 */
    .card.bg-primary small {
        font-size: 0.75rem !important;
        display: block;
    }
    .card.bg-primary h5 {
        font-size: 1.3rem !important;
        margin-top: 3px !important;
        margin-bottom: 0 !important;
    }

    /* Bootstrap d-flex 패딩 재정의 방지 */
    .card .d-flex {
        padding: 0 !important;
    }

    /* 2.2 단지별 상세 카드 헤더 (단지명 및 뱃지) 모바일 최적화 */
    .card-header h5 {
        font-size: 1rem; /* 단지명 크기 조정 */
        /* 모바일 환경에서는 뱃지와의 간격 확보를 위해 margin-right만 유지하거나 조정 */
        margin-right: 8px;
    }

    .card-header .badge {
        padding: 6px 10px;
        font-size: 0.7rem; /* 거래 건수 뱃지 크기 축소 */
    }

    /* 2.3 상세 테이블 (거래일, 층수, 가격 등) 모바일 최적화 */
    .table.table-sm th, .table.table-sm td {
        padding: 0.5rem 0.3rem;
        font-size: 0.7rem; /* 테이블 텍스트 전체 크기 축소 */
    }

    .table td.text-end.fw-bold.text-danger {
        font-size: 0.85rem; /* 가격 글씨 강조 크기 */
    }
}