/* =========================================================
   stores.css - 매장 찾기 페이지 스타일 (PC/Mobile 통합)
   ========================================================= */

/* 1. [공통 & PC] 기본 레이아웃 */
.store-finder-container {
    display: flex;
    max-width: 1400px;
    height: auto;
    min-height: 800px;
    margin: 120px auto 40px auto; /* PC 상단 여백 유지 */
    gap: 20px;
    padding: 0 20px;
    padding-bottom: 60px;
}

/* 왼쪽 패널 (검색 + 목록) */
.store-list-panel {
    width: 400px;
    height: 800px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 검색창 스타일 */
.search-box {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    width: 100%;
    box-sizing: border-box;
}
.search-box input {
    flex-grow: 1;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    min-width: 0;
}
.search-box button {
    background-color: #e67e22;
    color: white;
    border: none;
    padding: 0 20px;
    margin-left: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    flex-shrink: 0;
}

/* 매장 목록 스타일 */
.store-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1;
}

/* 개별 매장 아이템 스타일 */
.store-item {
    padding: 20px;
    border-bottom: 1px solid #eee;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s;
}
.store-item:last-child { border-bottom: none; }
.store-item:hover { background-color: #f5f5f5; }

.store-item h3 { margin: 0 0 10px 0; color: #333; }
.store-item p { margin: 5px 0; color: #666; }

/* 전화번호 스타일 (전화걸기 기능 삭제용) */
.store-item .tel {
    font-weight: bold;
    color: #e67e22;
    pointer-events: none;
    text-decoration: none;
}
.store-item a[href^="tel:"],
.info-window a[href^="tel:"] {
    display: none !important;
}


/* 오른쪽 지도 패널 */
.map-panel {
    flex: 1;
    height: 800px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f8f9fa;
    overflow: hidden;
}


/* =========================================================
   [모바일 전용 오버라이드]
   ========================================================= */
@media (max-width: 768px) {

    /* 1. 컨테이너 */
    .store-finder-container {
        flex-direction: column;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: calc(100vh - 120px) !important;
        min-height: auto !important;
    }

    /* 2. 지도 패널 */
    .map-panel {
        flex: none !important;
        width: 100% !important;
        height: 40% !important;
        border: none !important;
        border-radius: 0 !important;
        order: 1;
    }

    /* 3. 리스트 패널 (수정됨) */
    .store-list-panel {
        flex: 1 !important;
        height: auto !important;

        /* ★ [빨간색 부분 해결] 너비를 다시 100%로 꽉 채웁니다 */
        width: 100% !important;
        margin: -20px 0 0 0 !important; /* 양옆 마진 제거, 위쪽만 살짝 겹치게 */

        border: none !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
        z-index: 10;
        order: 2;
        overflow: hidden;
    }

    /* 4. 검색창 (수정됨) */
    .search-box {
        /* ★ [연두색 부분 해결] 배경은 꽉 찼지만, 내용은 안쪽으로 20px씩 들여씀 */
        padding: 20px 20px !important;
    }

    /* 푸터 숨기기 */
    .site-footer {
        display: none !important;
    }
}


/* =========================================================
   [PC 화면 정리] 모바일 전용 요소 숨기기
   ========================================================= */
.mobile-sidebar,
.bottom-nav,
#mobileSidebar {
    display: none !important;
}

/* 지도 정보창 내 전화걸기 숨김 */
.iw_inner a,
.infowindow a {
    display: none !important;
}