/* ===================================
    전체 컨테이너 스타일
    =================================== */
    .frontend-list {
        display: flex;
        flex-direction: column; /* 세로로 쌓기 */
        font-family: 'Malgun Gothic', '맑은 고딕', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        align-items: center;    /* 가로축 중앙으로 정렬 */
        width: 100%;
        gap: 20px;
    }

    .frontend-list-control {
        width: 100%;
        max-width: 1200px;
        border: 1px solid #bdbdbd;
        padding: 25px;
    }

    /* ===================================
    매물리스트 스타일
    =================================== */
    .property-list-table {
        width: 100%;
        max-width: 1200px;
        border-collapse: collapse;
        margin-top: 20px;
        margin-bottom: 20px;
        border-left: none;  /* 테이블 자체의 왼쪽 테두리 제거 */
        border-right: none; /* 테이블 자체의 오른쪽 테두리도 함께 제거하여 완성 */
    }

    .property-list-table th,
    .property-list-table td {
        border-bottom: 1px solid #e0e0e0; /* 아래쪽에만 가로줄을 추가합니다. */ 
        border-left: 0;  /* 왼쪽 세로줄 제거 (외부 스타일 덮어쓰기) */
        border-right: 0; /* 오른쪽 세로줄 제거 (외부 스타일 덮어쓰기) */   
        padding: 12px 8px;
        text-align: center;
        font-size: 14px;
    }

    .property-list-table th {
        border-top: 1px solid #e0e0e0; /* 헤더의 위쪽에도 선을 추가해 깔끔하게 닫아줍니다. */
        font-weight: 600;
    }

    .property-list-table a {
        text-decoration: none;
        color: #333;
    }

    .property-list-table a:hover {
        text-decoration: underline;
    }

    .property-list-table td[data-column-name="address"],
    .property-list-table td[data-column-name="title"] {
        text-align: left;
        padding-left: 10px;
    }

    /* --- 정렬 아이콘 스타일 (위치 조정 최종본) --- */

    /* 클릭 가능함을 알리기 위해 정렬 헤더에 커서 변경 */
    .property-list-table th[data-sort-by] {
        cursor: pointer;
        /* 중요: position: relative; 를 추가하여 ::after의 absolute 위치 기준점을 만듭니다. */
        position: relative; 
        padding-right: 25px; /* 아이콘 공간 확보를 위해 오른쪽 패딩 추가 */
    }

    /* 1. 기본 상태: 모든 정렬 가능 헤더에 회색 위아래 화살표 표시 */
    .property-list-table th[data-sort-by]::after {
        content: ' \2195'; /* 유니코드: 위아래 화살표 */
        color: #cccccc;   /* 연한 회색으로 비활성 상태 표시 */
        font-size: 14px;
        display: inline-block;
        /* ▼▼▼ 이 부분을 추가하거나 수정합니다 ▼▼▼ */
        vertical-align: middle; /* 텍스트 중간에 정렬 */
        position: absolute;     /* 부모(th)를 기준으로 절대 위치 지정 */
        right: 8px;            /* 오른쪽에서 8px 떨어지게 배치 */
        top: 50%;               /* 부모의 세로 중앙에 위치 */
        transform: translateY(-50%); /* 정확히 세로 중앙에 오도록 조정 */
        /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */
    }

    /* 2. 내림차순(DESC) 상태: 클릭된 헤더의 화살표 모양과 색상 변경 */
    .property-list-table th.sorted.desc::after {
        content: ' \25BC'; /* 유니코드: 채워진 아래쪽 삼각형 */
        color: #333333;   /* 진한 색상으로 활성 상태 표시 */
    }

    /* 3. 오름차순(ASC) 상태: 클릭된 헤더의 화살표 모양과 색상 변경 */
    .property-list-table th.sorted.asc::after {
        content: ' \25B2'; /* 유니코드: 채워진 위쪽 삼각형 */
        color: #333333;   /* 진한 색상으로 활성 상태 표시 */
    }

    /* ===================================
    매물리스트 컬럼별 색상 지정 (내용에만 적용)
    =================================== */

    /* 보증금 (파란색 계열) */
    .property-list-table td[data-column-name="deposit"] {
        color: #005A9C;
    }

    /* 권리금 (붉은색 계열) */
    .property-list-table td[data-column-name="premium"] {
        color: #D0021B;
    }

    /* 합금액 (임의 지정: 청록색 계열) */
    .property-list-table td[data-column-name="total_price"] {
        color: #DAA520;
    }

    /* ===================================
    필터 레이아웃 스타일 (★★ 최종 수정본 ★★)
    =================================== */

    .filter-panel-container {
        display: flex; /* 자식 요소들을 가로로 배치 */
        justify-content: space-between; /* 자식 요소들을 양쪽 끝으로 밀어냄 */
        align-items: center; /* 세로 중앙 정렬 */
        margin-bottom: 15px;
    }

    /* 새로 추가한 '매물등록' 버튼 스타일 */
    .stb-add-property-btn {
        /* 기본 스타일 */
        display: inline-block; /* a 태그의 레이아웃을 위해 추가 */
        background-color: #0073aa; /* 검색 버튼과 동일한 파란색 */
        color: #ffffff !important;           /* 검색 버튼과 동일한 흰색 글자 */
        border: none;
        border-radius: 5px;
        font-weight: 600;
        padding: 8px 18px; 
        font-size: 0.9em;
        cursor: pointer;
        text-decoration: none; /* a 태그 밑줄 제거 */
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* 검색 버튼과 동일한 그림자 */
        
        /* 간격 */
        margin-right: 10px; /* 톱니바퀴 버튼과의 간격 */

        /* 애니메이션 */
        transition: all 0.15s ease-in-out;
    }

    /* 마우스를 올렸을 때 (hover) */
    .stb-add-property-btn:hover {
        background-color: #005a87; /* 검색 버튼과 동일한 hover 색상 */
        color: #ffffff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* 검색 버튼과 동일한 hover 그림자 */
    }

    /* 클릭했을 때 (active) */
    .stb-add-property-btn:active {
        transform: translateY(1px) scale(0.98); /* 검색 버튼과 동일한 클릭 효과 */
        box-shadow: none;
    }

    /* [기본] 필터 그룹: 기본적으로 '지역/업종' 탭처럼 수직 정렬 */
    .filter-group {
        display: flex;
        flex-direction: column;  /* 기본값: 수직 정렬 */
        gap: 8px;
        flex: 1;
        min-width: 200px;
    }

    /* ★★★★★ 충돌 해결 핵심 ★★★★★ */
    /* [덮어쓰기] '임대조건', '수익/상세' 탭의 필터 그룹만 수평 정렬로 변경 */
    #tab-lease .filter-group,
    #tab-details .filter-group {
        flex-direction: row;     /* 충돌 해결: 수평(가로) 정렬로 강제 변경 */
        align-items: center;     /* 세로축 중앙 정렬 */
        gap: 15px;               /* 레이블과 컨텐츠 사이 간격 */
        flex: 1 1 100%;          /* 너비가 유연하게 변하지 않고 한 줄을 꽉 채우도록 설정 */
        min-width: auto;         /* 최소 너비 제한 해제 */
        margin-bottom: 12px;     /* 각 필터 행(row) 사이의 하단 여백 */
    }

    /* 왼쪽 정렬 대상인 '레이블' 스타일링 */
    #tab-lease .filter-group > label,
    #tab-details .filter-group > label {
        width: 80px;
        flex-shrink: 0;
        font-weight: bold;
        text-align: left;
    }

    /* [예외 처리] 키워드 필터 그룹은 기존의 '상단 정렬'을 유지하여 UI를 보존 */
    #tab-details .filter-group-keyword {
        align-items: flex-start;
    }

    /* [예외 처리] 키워드 필터의 '포함/제외' 세부 레이블은 별도 스타일 적용 */
    #tab-details .keyword-input-row > label {
        width: auto;             /* 너비 고정 해제 */
        font-weight: normal;     /* 굵기 보통으로 */
    }


    /* 기타 필터 그룹 관련 스타일 */
    .filter-group > label {
        font-weight: 500;
        font-size: 14px;
    }

    .filter-group input,
    .filter-group select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    /* 필터 '줄(row)' 관련 스타일은 현재 구조에서 큰 의미가 없어 단순화하거나 제거해도 무방합니다. */
    /* 일단 그대로 두어 다른 잠재적 영향을 막습니다. */
    .filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 20px;
    }
    .filter-row:last-child {
        margin-bottom: 0;
    }
        /* ===================================
            개별 필터 요소 스타일
            =================================== */
        .column-settings-container {
            margin-top: 20px;
        }
        #column-settings-toggle {
            padding: 8px 15px;
            border: 1px solid #ccc;
            background-color: #fff;
            cursor: pointer;
            border-radius: 4px;
        }
        #column-settings-panel {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px;
            margin-top: 15px;
            padding: 15px;
        }
        #column-settings-panel label {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }
        .filter-buttons {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .filter-buttons button,
        .filter-buttons .reset-button {
            padding: 10px 25px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
            font-size: 16px;
            display: inline-block;
        }
        .filter-buttons button {
            background-color: #337ab7;
            color: white;
            border: none;
        }
        .filter-buttons .reset-button {
            background-color: #f0f0f0;
            color: #333;
            border: 1px solid #ccc;
        }
        .store-type-buttons,
        .floor-buttons,
        .filter-button-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .store-type-buttons input[type="radio"],
        .floor-buttons input[type="radio"],
        .filter-button-group input[type="radio"] { /* filter-button-group에도 적용 */
            display: none;
        }
        .store-type-buttons .button-like-label,
        .floor-buttons .button-like-label,
        .filter-label-button { /* .filter-label-button 통합 */
            padding: 5px 10px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            color: #808080;
            font-weight: normal;
            transition: all 0.2s ease;
            user-select: none;
        }
        .store-type-buttons input[type="radio"]:checked + .button-like-label,
        .floor-buttons input[type="radio"]:checked + .button-like-label,
        .filter-label-button.selected { /* .selected와 통합 */
            border-color: #000000;      /* 테두리 색을 배경과 통일 */
            color: #000000;
            font-weight: 600;
        }
    /* ===================================
    주소필터 스타일
    =================================== */
    .address-filter-container {
        border: 1px solid #ccc;
        border-radius: 4px; /* 통일성을 위해 추가 */
        border-right: 1px solid #bdbdbd;
    }

    .address-columns-wrapper {
        display: flex;
        height: 200px;
    }

    /* 주소 필터의 '주소' 라벨 스타일 */
    .address-filter-container > label {
        display: block;                     /* 라벨을 블록 요소로 만들어 너비를 100% 차지하게 함 */
        text-align: center;                 /* 텍스트 중앙 정렬 */
        background-color: #f8f9fa;          /* 아주 옅은 회색 배경 */
        border-bottom: 1px solid #dee2e6;    /* 밑줄 효과 (테두리 활용) */
        padding: 10px 0;                    /* 위아래 여백으로 공간 확보 */
        font-size: 15px;                    /* 폰트 크기 */
        font-weight: 600;                   /* 폰트 굵기 */
    }
        .address-column {
            flex: 1;
            border-right: 1px solid #bdbdbd;
            overflow-y: auto;
        }
        .address-column:last-child {
            border-right: none;
        }
        .address-column ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .address-column ul li {
            padding: 8px 10px;
            cursor: pointer;
            font-size: 0.9rem;
        }
        .address-column ul li:hover {
            background-color: #f5f5f5;
        }
        .address-column ul li.active {
            background-color: #c4ddf8;
            color: rgb(0, 0, 0);
            font-weight: bold;
        }


    /* ===============================================
    업종 필터 레이아웃 스타일 (주소 필터와 동일하게 수정)
    =============================================== */

    /* '업종' 필터 컨테이너 */
    .category-filter-container {
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    /* '업종' 라벨 스타일 (주소 라벨과 동일하게) */
    .category-filter-container > label {
        display: block;
        text-align: center;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding: 10px 0;
        font-size: 15px;
        font-weight: 600;
    }

    /* 3단 컬럼을 감싸는 부모 컨테이너 */
    .category-columns-wrapper {
        display: flex;
        height: 200px;
    }

    /* 개별 컬럼 (대분류, 소분류, 매장유형) */
    .category-column {
        flex: 1;
        border-right: 1px solid #bdbdbd;
        overflow-y: auto;
    }

    /* 마지막 컬럼의 오른쪽 테두리는 제거 */
    .category-column:last-child {
        border-right: none;
    }

    /* 컬럼 내부의 리스트(ul) 스타일 초기화 */
    .category-column ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* 리스트 아이템(li) 스타일 */
    .category-column ul li {
        padding: 8px 10px;
        cursor: pointer;
        font-size: 0.9rem;
        transition: background-color 0.1s ease-in-out; /* 부드러운 효과 추가 */
    }

    /* 리스트 아이템에 마우스 올렸을 때 효과 */
    .category-column ul li:hover {
        background-color: #f5f5f5;
    }

    /* ★★★ 리스트 아이템 선택 시 효과 (주소 필터와 동일하게) ★★★ */
    .category-column ul li.active {
        background-color: #c4ddf8; /* 주소 필터와 동일한 연한 하늘색 */
        color: rgb(0, 0, 0);       /* 글자색 검은색으로 */
        font-weight: bold;
    }

        /* ===================================
            탭(Tab) UI 스타일
            =================================== */
        /* 탭 그룹 전체에 테두리를 만들고, 내부 버튼들을 담는 컨테이너로 활용 */
        .tab-buttons {
            display: flex;
            position: relative; /* z-index를 주기 위한 설정 */
        }

        /* 탭 콘텐츠 전체를 감싸는 컨테이너 */
        .tab-content-panels {
            padding: 25px;
            border-radius: 4px;
            position: relative;
        }

        /* 개별 탭 버튼 기본 스타일 */
        .tab-button {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #f8f9fa; /* 비활성 탭 배경색 */
            border: 1px solid #bdbdbd;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            font-size: 15px;
            font-weight: 500;
            color: #555;
        }
        /* 활성화된 탭 버튼 스타일 */
        .tab-button.active {
            background-color: #ffffff; /* 콘텐츠 영역과 동일한 흰색 배경 */
            border-bottom-color: #ffffff; /* 아래쪽 테두리를 흰색으로 만들어 끊어진 것처럼 보이게 함 */
            font-weight: bold;
            color: #333;
        }
        /* 탭 콘텐츠는 기본적으로 숨김 처리 */
        .tab-content {
            display: none;
        }
        /* 'active' 클래스가 붙은 탭 콘텐츠만 화면에 보여줌 */
        .tab-content.active {
            display: block;
        }
        /*
        * 키워드 검색 필터 스타일
        */
        /* 키워드 필터 전체 그룹 (메인라벨 + 입력칸 컨테이너) */
        .filter-group-keyword {
            display: flex;
            align-items: flex-start; /* 메인 라벨과 입력칸 상단 정렬 */
            gap: 15px; /* 메인 라벨과 입력칸 사이 간격 */
        }
        /* '키워드' 메인 라벨 */
        .filter-group-keyword .keyword-main-label {
            flex-shrink: 0; /* 공간이 좁아져도 줄어들지 않음 */
            font-weight: bold;
            padding-top: 8px; /* 첫번째 입력칸과 수직 위치 조절 */
        }
        /* '포함', '제외' 입력칸들을 감싸는 컨테이너 */
        .keyword-input-container {
            display: flex;
            flex-direction: column;
            gap: 10px; /* '포함' 행과 '제외' 행 사이 간격 */
            width: 100%; /* 남은 공간을 모두 차지 */
        }
        /* '포함', '제외' 각각의 행 */
        .keyword-input-row {
            display: flex;
            align-items: center;
            gap: 10px; /* 라벨과 입력칸 사이 간격 */
        }
        /* '포함(0/20)', '제외(0/100)' 라벨 */
        .keyword-input-row > label {
            width: 90px; /* 라벨 너비 고정으로 정렬 맞춤 */
            flex-shrink: 0;
            font-size: 14px;
            color: #555;
        }
        /* 모든 텍스트 입력칸 기본 스타일 */
        .keyword-input-container input[type="text"] {
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 8px 12px;
            font-size: 14px;
            width: 100%;
            box-sizing: border-box; /* 패딩과 보더를 너비에 포함 */
        }
        /* '추가' 버튼이 붙어있는 입력칸 그룹 */
        .input-with-button {
            display: flex;
            width: 100%;
        }
        /* '추가' 버튼과 붙어있는 입력칸의 오른쪽 테두리와 둥근 모서리 제거 */
        .input-with-button input[type="text"] {
            border-right: none;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        /* '추가' 버튼 */
        .add-keyword-btn {
            flex-shrink: 0;
            border: 1px solid #333;
            background-color: #333;
            color: white;
            padding: 8px 18px;
            cursor: pointer;
            font-size: 14px;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            transition: background-color 0.2s;
        }
        /* 버튼에 마우스 올렸을 때 효과 */
        .add-keyword-btn:hover {
            background-color: #555;
        }

    /* --- 매물리스트 표시항목 설정 드롭다운 스타일 --- */
    /* 전체 컨테이너를 오른쪽으로 정렬하기 위함 */
    .stb-list-view-options {
        position: relative; /* 드롭다운 메뉴의 기준점이 됨 */
        float: right; /* 오른쪽으로 보냄 */
        margin-left: 10px; /* 다른 요소와 간격 */
    }

    /* 톱니바퀴 아이콘 버튼 기본 스타일 */
    .stb-view-options-btn {
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        font-size: 18px; /* 아이콘 크기 */
        padding: 5px 8px;
        line-height: 1;
    }

    .stb-view-options-btn:hover {
        background-color: #e0e0e0;
    }

    /* 드롭다운 메뉴 스타일 */
    .stb-view-options-dropdown {
        display: none; /* ★★★ 기본적으로 메뉴를 숨김 ★★★ */
        position: absolute; /* 버튼을 기준으로 위치를 잡음 */
        right: 0;
        top: 100%; /* 버튼 바로 아래에 위치 */
        background-color: white;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 10px;
        min-width: 150px; /* 최소 너비 */
        z-index: 1000; /* 다른 요소들 위에 보이도록 함 */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    /* 드롭다운 메뉴 제목 스타일 */
    .stb-view-options-dropdown .dropdown-title {
        font-weight: bold;
        font-size: 14px; /* 글자 크기 지정 (추천) */
        padding: 5px 5px 10px 5px;
        border-bottom: 1px solid #eee;
        margin-bottom: 5px;
    }
    /* JS로 'show' 클래스가 추가되면 보이도록 함 */
    .stb-view-options-dropdown.show {
        display: block;
    }

    /* 드롭다운 메뉴 안의 체크박스 레이블 스타일 */
    .stb-view-options-dropdown label {
        display: block; /* 한 줄에 하나씩 보이도록 함 */
        padding: 5px;
        white-space: nowrap; /* 줄바꿈 방지 */
        cursor: pointer;
    }

    .stb-view-options-dropdown label:hover {
        background-color: #f5f5f5;
    }

    .stb-view-options-dropdown label input {
        margin-right: 8px;
    }

    /* =====================================================================
    [신규] 알바몬 스타일 태그 CSS
    기존 CSS 가장 마지막에 이 코드를 추가하세요.
    ===================================================================== */

    /* 1. 필터 영역과 태그 영역을 구분하는 상단 구분선 및 여백 */
    .selected-tags-container {
        /* 상단 여백 20px, 좌우로 -25px 당겨서 부모의 padding을 무시 */
        margin: 20px -25px 0 -25px;
        /* 당겨진 만큼 다시 안쪽으로 25px 여백을 줘서 태그 내용물 정렬 */
        padding: 15px 25px;
        /* 외곽선과 동일한 색상의 구분선 */
        border-top: 1px solid #bdbdbd;
        min-height: 24px;
    }

    /* 2. 개별 태그 스타일 (알바몬 스타일) */
    .selected-tags-container .tag {
        display: inline-flex;       /* 내부 텍스트와 x버튼 정렬을 위해 flex 사용 */
        align-items: center;      /* 세로 중앙 정렬 */
        background-color: #f1f3f5;  /* 알바몬과 유사한 옅은 회색 배경 */
        color: #495057;           /* 약간 부드러운 검은색 글자 */
        font-size: 14px;            /* 폰트 크기 */
        font-weight: 500;
        padding: 6px 12px;        /* 태그 내부 여백 */
        margin: 0 8px 8px 0;      /* 태그 사이의 간격 (오른쪽, 아래쪽) */
        border-radius: 20px;        /* 동그란 형태의 테두리 */
        border: none;               /* 기존 테두리 제거 */
        line-height: 1;             /* 줄간격 초기화 */
    }

    /* 3. 태그 안의 'x' 버튼 스타일 */
    .selected-tags-container .tag .remove-tag {
        margin-left: 8px;           /* 텍스트와 x버튼 사이 간격 */
        color: #868e96;           /* x버튼 색상 */
        font-weight: bold;
        cursor: pointer;
        transition: color 0.2s;     /* 부드러운 색상 변경 효과 */
    }

    .selected-tags-container .tag .remove-tag:hover {
        color: #343a40;           /* 마우스 올렸을 때 더 진하게 */
    }

    .selected-tags-container{
        border-top: 1px solid #bdbdbd;
        margin-top: 20px;
    }

    .sort-icon {
        display: none;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        opacity: 0.5;
    }

    /* ========================================================== */
    /* [추가할 코드] CSS 파일에 추가하세요 */
    /* ========================================================== */
    #sigungu-list > li.checked::after {
        content: '✓' !important;
        color: #0073aa !important;
        font-weight: bold !important;
        margin-left: 8px !important;
        /* !important를 사용하여 다른 스타일이 이 규칙을 덮어쓰지 못하도록 합니다. */
    }

    #parent-category-list > li.checked::after {
        content: '✓' !important;
        color: #0073aa !important;
        font-weight: bold !important;
        margin-left: 8px !important;
    }

    /* 최종 선택지인 '매장 유형' 리스트를 위한 체크마크 스타일입니다. */
    #store-type-list > li.checked::after {
        content: '✓' !important;
        color: #0073aa !important;
        font-weight: bold !important;
        margin-left: 8px !important;
    }

    /* 버튼 컨테이너 중앙 정렬 및 간격 조절 (이전과 동일) */
    .stb-search-controls {
        display: flex;
        justify-content: center;
        gap: 20px; /* 간격을 약간 줄였습니다. */
        margin-top: 30px;
        margin-bottom: 20px;
    }

    /* 1. 크기 조절: 모든 버튼의 기본 스타일 */
    #stb-search-btn,
    #stb-reset-btn {
        border: none;
        cursor: pointer;
        border-radius: 5px;
        font-weight: 600;
        
        /* [수정] 크기를 줄였습니다. */
        padding: 8px 18px; 
        font-size: 0.9em; 

        /* 3. 애니메이션: 부드러운 전환 효과를 위해 transition 속성 추가/수정 */
        transition: all 0.15s ease-in-out;
    }

    /* 2. 색상 변경: 검색 버튼 (stb-search-btn) - 포인트 컬러 */
    #stb-search-btn {
        background-color: #0073aa !important; /* 워드프레스 기본 파란색 (칙칙하지 않고 신뢰감 있는 색) */
        color: #ffffff !important;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

    #stb-search-btn:hover {
        background-color: #005a87 !important; /* 호버 시 더 진한 파란색 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    }

    /* 2. 색상 변경: 초기화 버튼 (stb-reset-btn) - 보조 컬러 */
    #stb-reset-btn {
        background-color: #ffffff !important; /* 깔끔한 흰색 배경 */
        color: #555 !important; /* 너무 진하지 않은 회색 글자 */
        border: 1px solid #ccc !important; /* 연한 회색 테두리 */
    }

    #stb-reset-btn:hover {
        background-color: #f5f5f5 !important; /* 호버 시 아주 연한 회색 배경 */
        border-color: #aaa !important;
    }

    /* 3. 클릭 애니메이션 추가: 버튼을 눌렀을 때(:active) */
    #stb-search-btn:active,
    #stb-reset-btn:active {
        /* 살짝 아래로 이동하고 작아지는 효과로 '눌리는' 느낌을 줍니다. */
        transform: translateY(1px) scale(0.98);
        box-shadow: none; /* 눌렀을 때는 그림자 제거 */
    }

    /* ========================================================== */
    /* [추가할 코드] CSS 파일에 추가하여 선택된 버튼을 표시합니다. */
    /* ========================================================== */
    input.filter-checkbox:checked + .filter-label-button {
        background-color: #0073aa; /* 선택 시 배경색 */
        color: #fff; /* 선택 시 글자색 */
        border-color: #005a87; /* 선택 시 테두리색 */
    }

    /* '층' 필터 그룹을 가로로 정렬 */
    #tab-lease .lease-condition-group[data-category="floor"] {
        display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding-left: 5px;
    }

    /* '층' 필터의 기본 체크박스는 숨김 */
    #tab-lease .lease-condition-group[data-category="floor"] .filter-checkbox {
        display: none;
    }

    /* '층' 필터의 라벨을 버튼처럼 꾸밈 */
    #tab-lease .lease-condition-group[data-category="floor"] .button-like-label {
        display: inline-flex; align-items: center; cursor: pointer; font-size: 1em; position: relative;
        /* [수정] JS가 글자 스타일을 제어하므로 !important 제거 */
        font-weight: normal; 
        color: inherit; 
    }

    /* 동그라미 모양 생성 */
    #tab-lease .lease-condition-group[data-category="floor"] .button-like-label::before {
        content: ''; display: inline-block; width: 18px; height: 18px; border-radius: 50%;
        border: 2px solid #b4b9be; margin-right: 8px; background-color: #fff; transition: all 0.2s;
    }

    /* [핵심 수정] :checked + 대신 .is-checked 클래스를 사용하도록 변경 */
    #tab-lease .lease-condition-group[data-category="floor"] .button-like-label.is-checked::before {
        border-color: #0073aa !important;
        background-clip: content-box;
        padding: 3px;
        background-color: #0073aa !important;
    }

    /* 키워드 태그 컨테이너 */
    .keyword-tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
        min-height: 20px; /* 태그가 없을 때도 최소 높이 유지 */
    }

    /* 개별 키워드 태그 기본 스타일 */
    .keyword-tag {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 500;
    }

    /* '포함' 키워드 태그 (파란색) */
    .keyword-tag.include {
        background-color: #eaf2fa;
        color: #0073aa;
    }

    /* '제외' 키워드 태그 (빨간색) */
    .keyword-tag.exclude {
        background-color: #fbeaea;
        color: #d63638;
    }

    /* 태그 안의 'x' 삭제 버튼 */
    .remove-keyword-tag {
        margin-left: 8px;
        cursor: pointer;
        font-weight: bold;
    }

    /* 새로운 광고 영역 전체를 감싸는 박스 */
    .stb-ad-wrapper {
        width: 100%;
        margin: 24px 0; /* 광고의 위아래 여백을 줍니다. */
        text-align: center; /* 내부의 광고가 중앙에 오도록 정렬합니다. */
    }
    
    /* 애드센스 광고 자체의 스타일 */
    .stb-ad-wrapper .adsbygoogle {
        display: block;
        width: 100%;
        min-height: 90px; /* 광고가 로드되기 전 최소 높이를 확보해 레이아웃 깨짐 방지 */
        background-color: #f7f7f7; /* 광고 로딩 중 배경색 (선택 사항) */
    }

    /* ==================================================
   [추가] 검색 리스트 전용 페이지네이션 스타일
   - 자바스크립트로 생성된 ul > li 구조를 가로로 정렬하고 디자인 입힘
================================================== */
#pagination-container {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: center; /* 전체 컨테이너 가운데 정렬 */
}

/* 1. 리스트(ul)를 가로로 눕히기 */
#pagination-container .page-numbers {
    display: flex !important;        /* 세로 -> 가로 강제 변환 */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none !important;     /* 점(Bullet) 제거 */
    padding: 0;
    margin: 0;
    gap: 6px;                        /* 버튼 사이 간격 */
}

/* 2. 각 버튼(li) 초기화 */
#pagination-container .page-numbers li {
    margin: 0;
    padding: 0;
    list-style: none; /* 이중 안전장치 */
}

/* 3. 버튼 디자인 (링크 a & 현재페이지 span 공통) */
#pagination-container .page-numbers li a,
#pagination-container .page-numbers li span {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 40px;            /* 정사각형 너비 */
    height: 40px;           /* 정사각형 높이 */
    line-height: 1;
    
    border: 1px solid #e5e5e5;
    border-radius: 4px;     /* 둥근 모서리 */
    background-color: #fff;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* 4. 마우스 올렸을 때 */
#pagination-container .page-numbers li a:hover {
    background-color: #f9f9f9;
    border-color: #333;
    color: #000;
}

/* 5. 현재 페이지 (검정 배경) */
#pagination-container .page-numbers li span.current {
    background-color: #222 !important; /* 강제 적용 */
    border-color: #222 !important;
    color: #fff !important;
    font-weight: 700;
    cursor: default;
}

/* 6. 모바일 대응 (화면 작을 때 버튼 크기 축소) */
@media screen and (max-width: 480px) {
    #pagination-container .page-numbers li a,
    #pagination-container .page-numbers li span {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

/* ==========================================================
   [추가] 테이블 줄바꿈 방지 및 말줄임표(...) 처리
   기존 코드와 충돌하지 않으니 맨 아래에 추가하세요.
   ========================================================== */

/* 1. 내용(td) 안의 글자가 절대 줄바꿈 되지 않도록 설정 */
.property-list-table td {
    white-space: nowrap;      /* 줄바꿈 금지 (한 줄로 강제) */
    vertical-align: middle;   /* 세로 중앙 정렬 */
}

/* 2. 제목, 주소, 업종 등 길이가 긴 항목은 넘치면 '...' 처리 */
/* (헤더인 th는 건드리지 않았으므로 정렬 화살표는 안전합니다) */
.property-list-table td[data-column-name="title"],
.property-list-table td[data-column-name="address"],
.property-list-table td[data-column-name="category"], 
.property-list-table td[data-column-name="store_type"] {
    max-width: 200px;           /* 이 너비보다 길어지면 자릅니다 (조절 가능) */
    overflow: hidden;           /* 넘치는 글자 숨김 */
    text-overflow: ellipsis;    /* 잘린 부분에 ... 표시 */
}

/* ==========================================================
   [수정] 테이블 헤더 틀 고정 (Sticky Header) - 강력 버전
   th 대신 thead 내부의 th를 직접 타겟팅하고 우선순위를 높임
   ========================================================== */
.property-list-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;      /* 다른 요소들보다 무조건 위에 오도록 */
    background-color: #f8f9fa !important; /* 배경색 강제 지정 (투명 방지) */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* 헤더 하단 그림자 추가 */
    
    /* 테두리 깨짐 방지용 (선택사항) */
    background-clip: padding-box; 
}