/* 전체 레이아웃 높이 고정 */
html, body, .app-container {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* 메인 콘텐츠 영역을 세로로 꽉 채우기 */
.main-content {
    display: flex;
    height: calc(100vh - 120px); /* 헤더 높이를 제외한 나머지 전체 */
}

/* 모바일 전용 스타일: 768px 이하에서만 작동 (PC 영향 0%) */

@media screen and (max-width: 768px) {
    /* 1. 헤더 전체: 패딩을 최소화하여 높이 축소 */
    header {
        padding: 6px 10px !important;
        gap: 4px !important;
    }

    /* 2. 상단 영역: 모든 요소를 한 줄(nowrap)로 배치 */
    .header-top {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px !important;
    }

    /* 3. 제목(로고): 크기를 대폭 줄여 공간 확보 */
    .logo-area {
        flex-shrink: 0; /* 제목이 찌그러지지 않게 고정 */
    }
    .logo-text h1 {
        font-size: 14px !important; /* 제목 크기 축소 */
        letter-spacing: -1px;
    }

    /* 4. 검색창 영역: 가변적으로 공간 차지 */
    .search-area {
        display: flex !important;
        flex: 1; /* 남은 공간을 검색창이 채움 */
        gap: 3px !important;
        min-width: 0; /* flex 박스 내 버그 방지 */
    }

    input[type="text"] {
        width: 100% !important;
        padding: 6px 8px !important; /* 내부 여백 축소 */
        font-size: 11px !important;
        height: 32px !important;
        border-radius: 16px !important;
    }

    /* 5. 모든 버튼들: 폰트와 크기 최소화 */
    #searchBtnTop, .filter-toggle-btn, .guide-link {
        padding: 0 8px !important;
        height: 32px !important;
        font-size: 10px !important;
        line-height: 32px;
        white-space: nowrap !important; /* 글자 줄바꿈 절대 방지 */
        border-radius: 6px !important;
        flex-shrink: 0;
    }

    /* 가이드와 필터 버튼 사이 간격 */
    .guide-link {
        margin-right: 2px;
    }

    /* 2. 메인 영역: 지도가 밀려나지 않도록 높이를 고정하거나 flex를 활용합니다. */
    .main-content {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 60px) !important; /* 헤더 높이를 제외한 나머지 전체 */
        overflow: hidden;
    }

    /* 3. 지도 패널: vh 대신 명확한 px 높이를 권장하며, 공간을 선점하도록 설정합니다. */
    #map-panel {
        width: 100% !important;
        height: 300px !important; /* 모바일에서 지도가 보일 최소 높이 고정 */
        min-height: 300px !important;
        flex-shrink: 0; /* 리스트 양이 많아도 지도가 줄어들지 않음 */
        position: relative !important;
        z-index: 10;
        border-bottom: 2px solid #eee;
    }

    /* 4. 실제 지도: 부모(#map-panel)의 높이를 100% 상속받습니다. */
    #map {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    /* 5. 사이드바(리스트 영역): 지도를 제외한 나머지 영역에서 스크롤되도록 설정 */
    #sidebar {
        width: 100% !important;
        flex: 1; /* 남은 공간 모두 차지 */
        overflow-y: auto !important; /* 리스트 영역만 별도 스크롤 */
        background-color: #fff;
        -webkit-overflow-scrolling: touch; /* 아이폰 스크롤 부드럽게 */
    }

    #list-panel {
        height: auto !important;
        padding-bottom: 50px; /* 하단 여백 확보 */
    }
}

/* 기본 설정 */
body, html { margin:0; padding:0; width:100%; height:100%; font-family: 'Pretendard', sans-serif; overflow: hidden; background-color: #f8f9fa; color: #333; }
.app-container { display: flex; flex-direction: column; height: 100vh; }

/* 헤더 영역 - 슬라이더 배치를 위해 확장 */
header {
    background: #4a6a8a; color: white; padding: 15px 25px; z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; flex-direction: column; gap: 15px;
}
.header-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
.logo-area { display: flex; align-items: center; cursor: pointer; }
.logo-icon { font-size: 28px; margin-right: 10px; }
.logo-text h1 { margin: 0; font-size: 20px; letter-spacing: -0.5px; }
.logo-text p { margin: 0; font-size: 10px; opacity: 0.8; font-weight: bold; }

/* 검색창 스타일 */
.search-area { display: flex; gap: 8px; flex: 1; max-width: 600px; justify-content: flex-end; }
input[type="text"] {
    padding: 10px 15px; width: 60%; border-radius: 25px; border: none;
    font-size: 14px; outline: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
#searchBtnTop {
    padding: 0 20px; background: #ff9800; color: white; border: none;
    border-radius: 25px; font-weight: bold; cursor: pointer; transition: 0.3s;
}
#searchBtnTop:hover { background: #e68a00; }
.guide-link { color: white; text-decoration: none; font-size: 12px; border: 1px solid rgba(255,255,255,0.4); padding: 5px 12px; border-radius: 15px; }

/* 가중치 조절 패널 */
.weight-control-panel {
    display: flex; gap: 20px; background: rgba(255,255,255,0.1);
    padding: 12px 20px; border-radius: 10px; align-items: center; flex-wrap: wrap;
}
.control-group { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.control-group label { font-size: 13px; font-weight: bold; white-space: nowrap; width: 90px; }
input[type="range"] { flex: 1; cursor: pointer; accent-color: #ff9800; }
.weight-badge {
    background: #fff; color: #4a6a8a; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: bold; min-width: 35px; text-align: center;
}

/* 메인 레이아웃 */
.main-content { display: flex; flex: 1; overflow: hidden; }
#sidebar { width: 400px; background: #fff; border-right: 1px solid #eee; display: flex; flex-direction: column; }

/* 상세 패널 스타일 */
#detail-panel { padding: 20px; border-bottom: 5px solid #f8f9fa; background: #fff; }
.detail-title { font-size: 22px; font-weight: bold; color: #4a6a8a; margin-bottom: 5px; }
.detail-score { color: #ff9800; font-weight: bold; font-size: 16px; margin-bottom: 15px; }
.metrics-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 15px 0;
    font-size: 13px; color: #666;
}
.metrics-grid span { background: #f0f4f8; padding: 6px; border-radius: 4px; text-align: center; }

/* 리스트 패널 스타일 */
.list-header { padding: 15px 20px; background: #f8f9fa; font-size: 13px; font-weight: bold; color: #666; border-bottom: 1px solid #eee; }
#list-panel { flex: 1; overflow-y: auto; }
.res-item { padding: 20px; border-bottom: 1px solid #eee; cursor: pointer; transition: 0.2s; }
.res-item:hover { background: #f0f7ff; }
.res-score { color: #ff9800; font-size: 14px; margin-bottom: 5px; }
.score-num { font-weight: bold; margin-left: 5px; color: #333; }
.res-title { font-size: 17px; font-weight: bold; color: #333; margin-bottom: 4px; }
.res-addr { font-size: 13px; color: #888; margin-bottom: 8px; }
.res-tag { font-size: 11px; color: #4a6a8a; background: #eef2f6; display: inline-block; padding: 2px 8px; border-radius: 4px; }

/* 지도 및 마커 스타일 */
#map-panel { flex: 1; position: relative; }
#map { width: 100%; height: 100%; }
.search-here-btn-inline {
    background: #fff; color: #4a6a8a; padding: 8px 15px; border-radius: 20px;
    font-size: 12px; font-weight: bold; cursor: pointer; border: 1px solid #4a6a8a;
}

/* 초기화 버튼 (갱신 버튼과 디자인 통일) */
.reset-btn {
    background: #fff;
    color: #4a6a8a;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #4a6a8a;
    margin-right: 8px; /* 오른쪽 갱신 버튼과의 간격 */
    transition: 0.2s;
}
.reset-btn:hover {
    background: #f0f7ff; /* 마우스를 올렸을 때 살짝 푸른빛이 돌게 함 */
}

/* 커스텀 핀 (점수별 색상) */
.custom-pin {
    width: 32px; height: 32px; border-radius: 50% 50% 50% 0; border: 2px solid #fff;
    transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
.custom-pin span { transform: rotate(45deg); color: #fff; font-size: 12px; font-weight: bold; }
.pin-gold { background: #ff9800; } /* 상위 맛집 */
.pin-blue { background: #4a6a8a; } /* 일반 맛집 */
.pin-gray { background: #adb5bd; } /* 기본 맛집 */

.info-label {
    background: #333; color: #fff; padding: 5px 12px; border-radius: 15px;
    font-size: 12px; white-space: nowrap; transform: translateY(-45px); box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* 지도 링크 컨테이너 */
.map-link-container {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* 네이버 지도 버튼 스타일 */
.naver-link {
    flex: 1;
    display: block;
    text-align: center;
    background: #03c75a;
    color: #fff;
    text-decoration: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
}

/* 카카오 지도 버튼 스타일 */
.kakao-link {
    flex: 1;
    display: block;
    text-align: center;
    background: #fae100;
    color: #3c1e1e; /* 카카오 특유의 다크 브라운 */
    text-decoration: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
}

/* 추천 카테고리 섹션 */
.detail-tags-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
}

.detail-tag {
    background: #f0f4f8;
    color: #4a6fa5;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 5px;
    font-weight: bold;
}

/* [1] PC 버전 기본 설정: 필터 버튼 숨김 */
.filter-toggle-btn {
    display: none;
}

/* ============================================================
   📱 모바일 통합 최적화 (필터 복구 및 스크롤 완성본)
   ============================================================ */
@media screen and (max-width: 768px) {
    /* 1. 전체 레이아웃: 스크롤 흐름 허용 */
    body, html, .app-container {
        height: auto !important;
        overflow: visible !important;
    }
    .main-content {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* 2. 슬림 헤더 및 중앙 정렬 (순서: 로고 -> 필터 -> 가이드 -> 검색 -> 탐지) */
    header {
        padding: 6px 10px !important;
        z-index: 1000;
    }
    .header-top {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 5px !important;
    }
    .logo-area { flex-shrink: 0; }
    .logo-icon { font-size: 16px !important; margin: 0 !important; }
    .logo-text h1 { font-size: 13px !important; margin: 0 !important; }
    .logo-text p { display: none !important; } /* 영문 숨김 */

    /* 헤더 내 모든 요소 높이 통일 */
    .filter-toggle-btn, .guide-link, #keywordSearch, #searchBtnTop {
        height: 30px !important;
        font-size: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
    }

    /* 필터 버튼 노출 */
    .filter-toggle-btn {
        display: flex !important;
        background: rgba(255,255,255,0.2);
        color: white;
        border: 1px solid rgba(255,255,255,0.4);
    }

    .search-area {
        display: flex !important;
        flex: 1;
        gap: 4px !important;
        align-items: center !important;
    }
    #keywordSearch { flex: 1; background: #fff; border: none; }
    #searchBtnTop { background: #ff9800 !important; color: white; border: none; font-weight: bold; }

    /* 3. 필터(가중치 조절) 패널 복구 */
    .weight-control-panel {
        display: none; /* 기본 숨김 */
        flex-direction: column !important;
        padding: 15px !important;
        background: #f8f9fa !important;
        border-bottom: 1px solid #ddd;
        gap: 10px !important;
        position: relative;
        z-index: 900;
        /* [추가] 패널 내부의 기본 글자 색상을 어두운 색으로 설정 */
        color: #333333 !important;
    }
    /* 버튼 클릭 시 활성화 */
    .weight-control-panel.active {
        display: flex !important;
    }
    .control-group { width: 100% !important; }
    .control-group label { width: 70px !important; font-size: 11px !important; }

    /* 4. 지도 패널: 상단 고정 (Sticky) */
    #map-panel {
        order: 1 !important;
        width: 100% !important;
        height: 35vh !important;
        min-height: 280px !important;
        position: sticky !important;
        top: 0;
        z-index: 500;
        background: #fff;
        border-bottom: 2px solid #eee;
    }
    #map { width: 100% !important; height: 100% !important; }

    /* 5. 리스트 영역: 10개 이상 확보 */
    #sidebar {
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
    }
    #list-panel {
        height: auto !important;
        min-height: 800px; /* 10개 이상 보일 수 있는 충분한 높이 */
        overflow-y: visible !important;
        padding-bottom: 60px;
    }
    .res-item { padding: 18px 15px !important; border-bottom: 1px solid #eee; }
}