/* =============================================================================
 * TripLinker - 반응형 스타일시트 (styles_responsive.css)
 *
 * 【파일 설명】
 * - 전역 공통 반응형: nav, 전역 패딩, 멀티컬럼→1열, 하단 바텀 네비게이션
 * - 페이지 전용 반응형은 분리:
 *     홈      → styles_responsive_main.css
 *     마이    → styles_responsive_mypage.css
 *     지도    → styles_responsive_map.css
 *     가계부  → styles_responsive_budget.css
 * - index.html <head> 에서 styles_responsive.css 를 먼저, 페이지별 파일을 뒤에 로드
 * ============================================================================= */

/* =============================================================================
 * 0. 전역 보정
 * ========================================================================== */

/* nav 실제 높이를 JS가 측정해서 덮어씀 (기본값 72px) */
:root { --nav-h: 72px; }

html, body {
    max-width: 100%;
}
body {
    overflow-x: hidden;
}

/* 이미지/미디어가 부모를 넘지 않도록 */
img, video, iframe {
    max-width: 100%;
}

/* 로고: 기본(데스크탑)은 전체 로고만, 심볼 로고는 숨김 */
.nav-logo .logo-symbol { display: none; }
/* 스텝 라벨: 기본(데스크탑)은 전체 라벨만, 축약 라벨은 숨김 */
.nps-lbl-short { display: none; }

/* 가로로 넘치기 쉬운 표/코드 영역은 가로 스크롤 허용 */
table {
    max-width: 100%;
}

/* =============================================================================
 * 1. 태블릿 이하 (≤1024px)
 * ========================================================================== */
@media (max-width: 1100px) {

    /* 본문 컨테이너 좌우 여백 축소 */
    .sec {
        padding-left: 28px;
        padding-right: 28px;
    }

    /* 관리자 사이드바 폭 축소 */
    .admin-layout {
        grid-template-columns: 170px 1fr;
    }

    /* 채팅/커뮤니티 사이드 폭 축소 */
    .chat-layout {
        grid-template-columns: 1fr 260px;
    }
    .comm-layout {
        grid-template-columns: 1fr 220px;
    }

    /* hero / stats-grid / my-layout / map-wrap → 각 page 반응형 파일로 이동 */

    /* nav 메뉴가 넘칠 경우 가로 스크롤 허용 */
    .nav-links {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-links::-webkit-scrollbar {
        display: none;
    }
}

/* =============================================================================
 * 2. 모바일 (≤768px) — 핵심
 * ========================================================================== */
@media (max-width: 768px) {

    /* ---------- 2-1. NAV ---------- */
    nav {
        flex-wrap: wrap;
        padding: 10px 14px;
        row-gap: 8px;
        align-items: center;
    }

    /* 로고는 항상 보이고 좌측 정렬 */
    .nav-logo {
        flex: 0 0 auto;
        margin-right: auto;
    }
    .nav-logo .logo-img {
        height: 44px;
        margin: 0;
    }

    /* 햄버거 버튼 숨김 — 하단 bottom nav 로 메뉴 대체 */
    #navHamburger { display: none !important; }

    /* 메뉴 링크: 기본 숨김 유지 (플래너 단계만 선택적으로 표시) */
    .nav-links {
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        overflow: visible;
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        transition: max-height .28s ease, opacity .2s ease;
    }

    /* nav-btns: 항상 표시 / 로고 오른쪽에 배치 */
    .nav-btns {
        order: 2;
        flex-basis: auto;
        flex-wrap: nowrap;
        gap: 4px;
        max-height: none;
        overflow: visible;
        opacity: 1;
        pointer-events: auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        padding-top: 0 !important;
        border-top: none !important;
    }

    /* 모바일에서 불필요한 버튼 숨김 (로그인·회원가입·마이페이지명) */
    #navLoginBtn, #navSignupBtn, #navUserNameBtn { display: none !important; }

    /* 관리자 버튼: 모바일에서는 관리자 계정일 때만 로그아웃 옆에 표시
     *  (display 는 JS updateNav 이 admin 일 때만 ''로 풀어줌 → 일반 유저는 숨김 유지) */
    #navAdminLink {
        order: 0;                 /* 로그아웃(order:1) 바로 왼쪽 */
        font-size: 12px;
        padding: 6px 10px;
    }

    /* 로그아웃 버튼: 알림 왼쪽, 작게 */
    #navLogoutBtn {
        order: 1;
        font-size: 12px;
        padding: 6px 10px;
    }
    #navBellWrapper { order: 2; margin-right: 0; }

    /* 플래너·지도 진입 시: 단계를 로고-버튼 사이 같은 행에 표시 */
    body:has(#navPlannerSteps[style*="flex"]) .nav-logo { margin-right: 0; }
    body:has(#navPlannerSteps[style*="flex"]) .nav-links {
        order: 1;           /* 로고(auto=0) 다음, nav-btns(2) 이전 */
        flex: 1;
        min-width: 0;
        flex-basis: auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        max-height: 60px;
        opacity: 1;
        pointer-events: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 4px;
    }
    body:has(#navPlannerSteps[style*="flex"]) .nav-links::-webkit-scrollbar { display: none; }
    body:has(#navPlannerSteps[style*="flex"]) .nav-links .nav-link { display: none; }
    /* 단계 버튼 크기 축소 */
    body:has(#navPlannerSteps[style*="flex"]) .nps-btn { font-size: 11px; padding: 3px 5px; gap: 3px; }
    body:has(#navPlannerSteps[style*="flex"]) .nps-num  { width: 14px; height: 14px; font-size: 8px; }

    /* ── 플래너 진입 시 nav 한 줄 만들기 ── */
    /* 1) 로고: 전체 로고 숨기고 비행기 심볼만 표시 (가로 공간 확보) */
    body:has(#navPlannerSteps[style*="flex"]) .nav-logo .logo-full { display: none; }
    body:has(#navPlannerSteps[style*="flex"]) .nav-logo .logo-symbol {
        display: block;
        height: 30px;
    }
    /* 2) 스텝 라벨: 전체 라벨 숨기고 축약 라벨("기본/취향/AI/경로") 표시 */
    body:has(#navPlannerSteps[style*="flex"]) .nps-lbl-full  { display: none; }
    body:has(#navPlannerSteps[style*="flex"]) .nps-lbl-short { display: inline; }
    /* 3) 칩이 줄바꿈되지 않도록 + 더 압축 */
    body:has(#navPlannerSteps[style*="flex"]) .nps-btn {
        white-space: nowrap;
        flex: 0 0 auto;
        padding: 3px 6px;
    }
    body:has(#navPlannerSteps[style*="flex"]) .nps-lbl { white-space: nowrap; font-size: 11px; }
    /* 4) 화살표 간격 축소 */
    body:has(#navPlannerSteps[style*="flex"]) .nps-arrow { margin: 0 1px; font-size: 11px; }
    /* 5) 스텝 영역은 가로 스크롤 없이 내용에 맞게 (줄바꿈만 방지) */
    body:has(#navPlannerSteps[style*="flex"]) .nav-links {
        overflow-x: visible;
        flex-wrap: nowrap;
    }

    .nav-btns .btn-o,
    .nav-btns .btn-f {
        flex: 0 0 auto;
        text-align: center;
        padding: 6px 10px;
        font-size: 12px;
    }

    /* 플래너 진입 시 로그아웃·알림 압축 (한 줄 확보) */
    body:has(#navPlannerSteps[style*="flex"]) #navLogoutBtn {
        font-size: 11px;
        padding: 5px 8px;
    }
    body:has(#navPlannerSteps[style*="flex"]) #navBellBtn { font-size: 19px; }

    /* 알림 팝업이 화면을 넘지 않도록 */
    #notifPopup {
        width: 92vw !important;
        right: 4vw !important;
        left: auto !important;
    }

    /* nav 실제 높이를 --nav-h 변수로 반영 (JS가 측정해서 갱신) */
    .page {
        padding-top: var(--nav-h, 72px);
    }

    /* ---------- 2-2. 본문 패딩 축소 ---------- */
    .sec {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 36px;
    }
    /* .hero 패딩/레이아웃 → styles_responsive_main.css */
    .info-wrap {
        padding-left: 14px;
        padding-right: 14px;
    }

    .sec-hd {
        font-size: 22px;
    }

    /* ---------- 2-3. 멀티컬럼 → 1열 전환 ---------- */
    /* hero / my-layout → 각 page 반응형 파일로 이동 */
    .form-row,
    .pl-2col,
    .loc-selector,
    .chat-layout,
    .budget-layout,
    .comm-layout,
    .admin-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* hsc-cards / top3-grid / popular-grid → styles_responsive_main.css */
    /* chip-grid4 / stats-grid / prev-stats-row → styles_responsive_mypage.css */

    /* 날씨 7일: 가로 스크롤 유지하되 한 칸 최소폭 확보 */
    .weather-grid {
        grid-template-columns: repeat(7, minmax(64px, 1fr));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---------- 2-4. 관리자 사이드바 → 상단 가로 스택 ---------- */
    .admin-layout > :first-child {
        /* 사이드 메뉴를 가로 스크롤 탭처럼 */
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ---------- 2-6. 플래너 스텝바 ---------- */
    .step-bar,
    .step-bar.steps-4 {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* ---------- 2-7. 가계부 요약/내역 ---------- */
    #ledger-main [style*="grid-template-columns:1fr 1fr 1fr"],
    #ledger-main [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .ledger-add {
        flex-direction: column;
        align-items: stretch;
    }
    .ledger-add > * {
        width: 100% !important;
    }
    .ledger-header-export {
        flex-wrap: wrap;
    }

    /* ---------- 2-8. 모달 폭 ---------- */
    #reportPostModal > div:last-child,
    #reportCommentModal > div:last-child {
        width: 90vw !important;
        max-width: 340px;
    }
    [style*="width:580px"],
    [style*="width: 580px"],
    [style*="width:500px"],
    [style*="width: 500px"],
    [style*="width:660px"],
    [style*="width: 660px"] {
        width: auto !important;
        max-width: 94vw !important;
    }

    /* 토스트 */
    .toast {
        max-width: 92vw;
        font-size: 12.5px;
    }
}

/* =============================================================================
 * 3. 소형 폰 (≤480px)
 * ========================================================================== */
@media (max-width: 480px) {

    body {
        font-size: 14px;
    }

    .sec {
        padding-left: 12px;
        padding-right: 12px;
    }

    .sec-hd {
        font-size: 19px;
    }

    /* hsc-cards / top3-grid / popular-grid → styles_responsive_main.css */
    /* stats-grid / prev-stats-row / chip-grid4 → styles_responsive_mypage.css */

    .btn-o,
    .btn-f {
        font-size: 12px;
        padding: 8px 10px;
    }

    .nav-logo .logo-img {
        height: 38px;
    }

    #ledger-act-table {
        font-size: 12px;
    }
}

/* =============================================================================
 * 4. 가로 모드 짧은 화면 (높이 ≤500px, 가로 폰)
 * ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    nav.nav-open .nav-links,
    nav.nav-open .nav-btns {
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* =============================================================================
 * 5. 데스크탑에서는 햄버거 숨김
 * ========================================================================== */
@media (min-width: 769px) {
    #navHamburger {
        display: none;
    }
}

/* =============================================================================
 * 6. 모바일 하단 고정 네비게이션 (Bottom Navigation)
 *    제거 방법: 이 섹션 전체 + index.html 의 #bottomNav 블록 삭제
 * ========================================================================== */

/* 데스크탑·태블릿에서 완전히 숨김 */
.bnav { display: none; }

@media (max-width: 768px) {

    /* --- 6-1. 컨테이너 --- */
    .bnav {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1200;
        background: var(--surface);
        border-top: 1px solid var(--border2);
        box-shadow: 0 -2px 12px rgba(0,0,0,.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* --- 6-2. 메인 탭 바 --- */
    .bnav-bar {
        display: flex;
        align-items: stretch;
    }

    /* --- 6-5. 탭 버튼 --- */
    .bnav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 2px 10px;
        border: none;
        background: transparent;
        color: var(--text3);
        cursor: pointer;
        transition: color .15s;
        -webkit-tap-highlight-color: transparent;
    }
    .bnav-icon { font-size: 20px; line-height: 1; transition: transform .15s; }
    .bnav-lbl  { font-size: 10px; font-weight: 500; white-space: nowrap; }

    /* 활성 탭 강조 */
    body:has(#page-main.active)      .bnav-item[data-page="main"],
    body:has(#page-community.active) .bnav-item[data-page="community"],
    body:has(#page-weather.active)   .bnav-item[data-page="weather"],
    body:has(#page-planner.active)   .bnav-item[data-page="planner"],
    body:has(#page-map.active)       .bnav-item[data-page="planner"],
    body:has(#page-mypage.active)    .bnav-item[data-page="mypage"] {
        color: var(--sage);
    }
    body:has(#page-main.active)      .bnav-item[data-page="main"] .bnav-icon,
    body:has(#page-community.active) .bnav-item[data-page="community"] .bnav-icon,
    body:has(#page-weather.active)   .bnav-item[data-page="weather"] .bnav-icon,
    body:has(#page-planner.active)   .bnav-item[data-page="planner"] .bnav-icon,
    body:has(#page-map.active)       .bnav-item[data-page="planner"] .bnav-icon,
    body:has(#page-mypage.active)    .bnav-item[data-page="mypage"] .bnav-icon {
        transform: translateY(-1px);
    }

    /* --- 6-6. 본문이 bottom nav 뒤에 가리지 않도록 하단 여백 --- */
    .page {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }

    /* --- 6-7. 비로그인 시 마이페이지 탭 → 로그인 아이콘 --- */
    body:has(#navUserNameBtn[style*="none"]) .bnav-item[data-page="mypage"] .bnav-icon { font-size: 0; }
    body:has(#navUserNameBtn[style*="none"]) .bnav-item[data-page="mypage"] .bnav-icon::before { content: "🔑"; font-size: 20px; }
    body:has(#navUserNameBtn[style*="none"]) .bnav-item[data-page="mypage"] .bnav-lbl   { font-size: 0; }
    body:has(#navUserNameBtn[style*="none"]) .bnav-item[data-page="mypage"] .bnav-lbl::before   { content: "로그인"; font-size: 10px; font-weight: 500; }
}

/* =============================================================================
 * [수정] 플래너 STEP1 상단 버튼 — 모바일에서 글씨 한 줄 유지 + 최적 배치
 *   - 날씨 미리보기 / 이전 플랜 불러오기 버튼이 모바일에서 줄바꿈되던 문제 해결
 *   - 두 버튼을 한 줄(전체폭 2분할)로 배치하고 텍스트 줄바꿈 금지
 * ========================================================================== */
@media (max-width: 768px) {
    /* 카드 타이틀 영역: 제목은 한 줄, 버튼 묶음은 아래로 떨어져 전체 폭 사용 */
    .pl-card-ttl {
        flex-wrap: wrap;
    }
    .pl-card-ttl > span:first-child {
        flex: 1 1 100%;
    }
    /* 버튼 묶음(weather-btn-wrap + btn-load-pref)을 한 줄 전체 폭 2분할 */
    .pl-card-ttl > div:last-child {
        flex: 1 1 100%;
        display: flex;
        gap: 8px;
        width: 100%;
    }
    #weather-btn-wrap {
        flex: 1 1 0;
        min-width: 0;
    }
    .weather-date-btn,
    .btn-load-pref {
        width: 100%;
        justify-content: center;
        white-space: nowrap;       /* 글씨 줄바꿈 금지 → 한 줄 */
        padding: 9px 6px;
        font-size: 12px;
    }
    .btn-load-pref {
        flex: 1 1 0;
        min-width: 0;
    }
    /* weather-btn-wrap이 숨겨진(display:none) 경우 이전 플랜 버튼이 전체 폭 */
    .pl-card-ttl > div:last-child > #weather-btn-wrap[style*="none"] + .btn-load-pref {
        flex: 1 1 100%;
    }
}

/* =============================================================================
 * [수정] 지도 화면 날씨 악화 예보 박스 — 모바일에서 잘림 방지
 *   - 하단 바텀 네비게이션과 겹쳐 박스 하단이 잘리던 문제 해결
 *   - 위치를 네비 높이만큼 올리고, 좌우 폭을 화면에 맞게 제한
 * ========================================================================== */
@media (max-width: 768px) {
    #page-map .weather-alert {
        left: 12px;
        right: 12px;
        max-width: none;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
        z-index: 30;
    }
}

/* =============================================================================
 * 태블릿(769~1100px): 상단 네비는 유지하되, 플래너 스텝·로고만 축약 표시
 * ========================================================================== */
@media (min-width: 769px) and (max-width: 1100px) {
    /* 스텝 표시 중: 메뉴+스텝이 잘리지 않도록 nav-links 오버플로 해제 + 가로 스크롤 허용 */
    body:has(#navPlannerSteps[style*="flex"]) .nav-links {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    body:has(#navPlannerSteps[style*="flex"]) .nav-links::-webkit-scrollbar { display: none; }
    /* 메뉴 링크 라벨 압축(공간 확보용) */
    body:has(#navPlannerSteps[style*="flex"]) .nav-link { padding: 5px 7px; font-size: 11px; }
    /* 스텝바 좌우 여백 축소 */
    body:has(#navPlannerSteps[style*="flex"]) .nav-planner-steps { margin: 0 8px; }

    /* 플래너 진입 시: 로고 심볼만 + 스텝 축약 라벨 (한 줄 확보) */
    body:has(#navPlannerSteps[style*="flex"]) .nav-logo .logo-full { display: none; }
    body:has(#navPlannerSteps[style*="flex"]) .nav-logo .logo-symbol {
        display: block;
        height: 30px;
    }
    body:has(#navPlannerSteps[style*="flex"]) .nps-lbl-full  { display: none; }
    body:has(#navPlannerSteps[style*="flex"]) .nps-lbl-short { display: inline; }
    body:has(#navPlannerSteps[style*="flex"]) .nps-btn {
        white-space: nowrap;
        padding: 3px 6px;
        font-size: 11px;
    }
    body:has(#navPlannerSteps[style*="flex"]) .nps-num { width: 14px; height: 14px; font-size: 8px; }
    body:has(#navPlannerSteps[style*="flex"]) .nps-lbl { white-space: nowrap; font-size: 11px; }
    body:has(#navPlannerSteps[style*="flex"]) .nps-arrow { margin: 0 1px; font-size: 11px; }
}