/* ─────────────────────────────────────────────────
   공통/기본 스타일
───────────────────────────────────────────────── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.store-finder {
    width: 100%;
    padding: 20px;
    overflow-y: auto;
}

.section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.circle-play {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #599BF6;
    color: white;
    margin-right: 10px;
    font-size: 16px;
}


.search-input {
width: 100% !important;
height: 38px !important;
padding: 0 45px 0 15px !important;
border: 1px solid #ddd !important; /* 기존 테두리 설정 유지 /
border-color: #ddd !important; / 테두리 색상 명시적으로 재정의 및 !important 적용 */
border-radius: 4px !important;
font-size: 15px !important;
color: #333 !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
background-color: #f5f5f5 !important;
}


/* ─────────────────────────────────────────────────
   검색 영역 스타일 (콤보박스 너비/높이 조정, 매장명 회색 배경, 화살표 하나만)
───────────────────────────────────────────────── */
.search-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 30px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

/* 콤보박스 컨테이너 (.location-select) */
.location-select {
    flex-basis: 45% !important; /* 전체 search-bar 너비의 약 45% 차지 */
    max-width: 300px !important; /* 콤보박스 최대 너비 증가 */
    min-width: 180px !important; /* 콤보박스 최소 너비 유지 */
    flex-shrink: 0 !important; /* 콤보박스가 줄어들지 않도록 설정 */
    position: relative;
}

/* 콤보박스 자체 (#location-filter) */
#location-filter { /* HTML 스크린샷에서 확인된 ID 사용 */
    width: 100% !important;
    height: 38px !important; /* 높이 42px에서 38px로 줄임 */
    padding: 0 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background-color: white !important;
    font-size: 15px !important;
    color: #555 !important;
    cursor: pointer !important;
    padding-right: 30px !important;
    /* 중요: 브라우저 기본 화살표를 사용하려면 아래 'appearance: none' 주석을 유지해야 합니다.
       만약 브라우저 기본 화살표를 숨기고 직접 화살표를 추가하려면 주석을 해제해야 합니다. */
    /* -webkit-appearance: none !important; */
    /* -moz-appearance: none !important; */
    /* appearance: none !important; */
}

/* 콤보박스 중복 화살표 제거:
   이전에 CSS로 추가했던 가상 요소를 제거하여 브라우저 기본 화살표만 남깁니다. */
.location-select::after {
    content: none !important; /* 이전 ::after 가상 요소를 강제로 비웁니다. */
}

/* 콤보박스 포커스 시 스타일 */
#location-filter:focus {
    border-color: #007BFF !important;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2) !important;
    outline: none !important;
}

/* 검색 입력창 컨테이너 (.search-container) */
.search-container {
    position: relative !important;
    flex-grow: 1 !important;
    max-width: 400px !important;
    flex-shrink: 0 !important; /* 검색 입력창이 줄어들지 않도록 설정 */
}

/* 검색 입력창 (매장명 필드) */
.search-input {
    width: 100% !important;
    height: 38px !important; /* 높이 42px에서 38px로 줄임 */
    padding: 0 45px 0 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    color: #333 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    background-color: #f5f5f5 !important; /* 매장명 입력 필드 회색 배경 */
}

/* 플레이스홀더 텍스트 스타일 */
.search-input::placeholder {
    color: #999 !important;
    font-size: 15px !important;
    text-align: left !important;
}

/* 검색 입력창 포커스 시 스타일 */
.search-input:focus {
    border-color: #007BFF !important;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2) !important;
    outline: none !important;
    background-color: #fff !important; /* 포커스 시 흰색 배경 */
}


/* ─────────────────────────────────────────────────
   매장 목록 테이블 정렬 및 높이 조정
───────────────────────────────────────────────── */
.store-list {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* 테이블 헤더 및 데이터 셀 공통 스타일 */
.store-list th,
.store-list td {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
        font-size: 16px;
}

/* 테이블 헤더 스타일 */
.store-list th {
    background-color: #f9f9f9;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
}

/* 각 컬럼별 너비 및 텍스트 정렬 */
/* '위치' 컬럼 */
.store-list th:nth-child(1),
.store-list td:nth-child(1) {
    width: 25%;
    text-align: center; /* 중앙 정렬 */
}

/* '매장명' 컬럼 */
.store-list th:nth-child(2),
.store-list td:nth-child(2) {
    width: 50%;
    text-align: center; /* 좌측 정렬 */
}

/* '기기수' 컬럼 */
.store-list th:nth-child(3),
.store-list td:nth-child(3) {
    width: 25%;
    text-align: center; /* 중앙 정렬 */
}

/* 매장 아이템 스타일 (<td> 내부에 별도 <div>/<span>가 있다면) */
.store-item {
    display: block;
    width: 100%;
}

.store-location,
.store-name,
.store-count {
    display: inline-block;
    margin: 0;
}

/* 태그 스타일 - 변경 없음 */
.open-tag {
    display: inline-block;
    background-color: #f0f8ff;
    color: #4682b4;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    margin-right: 5px;
}

/* 페이지네이션 - 변경 없음 */
.store-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.store-pagination .page-number {
    margin: 0 3px;
    padding: 4px 8px;
    background-color: #f5f5f5;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    line-height: 1.2;
}

.store-pagination .page-number.active {
    background-color: #599BF6;
    color: white;
}

/* ─────────────────────────────────────────────────
   반응형 스타일
───────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .search-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .location-select,
    .search-container {
        width: 100% !important;
        max-width: none !important;
        flex-basis: auto !important;
        flex-shrink: 1 !important; /* 작은 화면에서는 다시 줄어들도록 허용 */
    }

    .search-input {
        padding-right: 45px !important;
    }

    .search-container .search-icon {
        right: 10px !important;
    }
}


/* 매장명 검색 input 스타일 */
#store-search {
    font-size: 16px !important;          /* 입력 텍스트 크기 */
    border: 1px solid #ccc !important;   /* 테두리 색상: 회색 */
    border-radius: 4px;                  /* (기존) 모서리 둥글게 */
    padding: 0 12px;                     /* (기존) 좌우 여백 */
    height: 38px;                        /* (기존) 높이 */
    
}

/* 플레이스홀더 텍스트도 동일 크기로 */
#store-search::placeholder {
    font-size: 16px !important;
}


/* 1) .search-icon 관련 스타일 삭제 또는 주석 처리 */
/* .search-container .search-icon { … } */
/* .search-container .search-icon::before { … } */
/* .search-container .search-icon:hover { … } */
/* .search-container .search-icon:active { … } */

/* 2) 버튼 스타일링 */
.search-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 12px;
    height: 36px;
    line-height: 30px;
    background-color: #599BF6;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s, transform 0.1s;
    z-index: 1;
}

.search-button:hover {
    background-color: #FF7A59;
   
}

.search-button:active {
    transform: translateY(-50%) scale(0.98);
}

/* 3) input 옆에 버튼 간격 확보 (optional) */
.search-input {
    padding-right: 80px; /* 버튼 너비 + 마진만큼 패딩 늘리기 */
}