/*
 * mobile.css - 모바일 전용 보정 (max-width: 768px)
 *
 * layouts/app.blade.php 에서 <link media="(max-width:768px)"> 로,
 * @yield('content') 뒤에서 로드한다. 페이지별 <style> 블록보다 문서 순서가
 * 뒤라서 같은 특이도의 규칙을 덮을 수 있다.
 *
 * 원칙: 데스크톱에는 어떤 영향도 주지 않는다. 규칙을 추가할 때도 이걸 지킬 것.
 */

/* ---------------------------------------------------------------
 * iOS Safari 입력창 자동 확대 차단
 *
 * iOS 는 폰트가 16px 미만인 입력창에 포커스가 가면 화면을 확대하고,
 * 포커스가 풀려도 원래 배율로 돌아오지 않는다.
 * .form-input 계열이 --fs-body(15px) 라서 회원가입 1:1문의처럼 입력이 많은
 * 화면에서 이 현상이 그대로 나타난다.
 *
 * front/inquiry/create.blade.php 등 페이지 <style> 이 .form-input 을 다시
 * 정의하는 곳이 있어 !important 로 못 박는다. 확대 차단은 조건부로 먹히면
 * 의미가 없다.
 *
 * 대상은 텍스트를 입력하는 컨트롤로 한정한다. checkbox/radio/submit 까지
 * 건드리면 버튼 글자 크기가 같이 바뀐다.
 * --------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input:not([type]),
select,
textarea {
    font-size: 16px !important;
}

/* ---------------------------------------------------------------
 * 히어로 텍스트: 관리자에서 고른 세로(data-v)·가로(data-h) 위치를 모바일에도 반영
 *
 * home.blade.php 의 정렬 규칙이 .hero-content[data-v="..."][data-h="..."]
 * (특이도 0,3,0) 에 !important 로 걸려 있다. 그래서 .hero 를 앞에 붙여
 * 0,4,0 으로 올려야 덮인다. 단순히 !important 만 붙여서는 안 밀린다.
 *
 * 가로: left/right 를 0 으로 펼쳐 카드 전체 폭을 쓰고 text-align 으로만 맞춘다.
 * (left:50% 로 잡으면 가용 폭이 절반으로 줄어 긴 제목이 일찍 줄바꿈된다.)
 * 세로: 카드(350px)가 작아 PC 의 60px 여백 대신 위 24px, 아래는 번호 알약을 피해 56px.
 *       가운데는 기존처럼 중앙에서 24px 내려 번호 알약과 균형을 맞춘다.
 * --------------------------------------------------------------- */
.hero .hero-content,
.hero .hero-content[data-v][data-h] {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    text-align: center !important;
}

/* 세로 위치 */
.hero .hero-content[data-v="top"][data-h] {
    top: 24px !important;
    bottom: auto !important;
    transform: none !important;
}
.hero .hero-content[data-v="middle"][data-h],
.hero .hero-content:not([data-v]) {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(calc(-50% + 24px)) !important;
}
.hero .hero-content[data-v="bottom"][data-h] {
    top: auto !important;
    bottom: 56px !important;
    transform: none !important;
}

/* 가로 위치 */
.hero .hero-content[data-v][data-h="left"] { text-align: left !important; }
.hero .hero-content[data-v][data-h="center"] { text-align: center !important; }
.hero .hero-content[data-v][data-h="right"] { text-align: right !important; }

/* 줄 간격은 좁게 - 카드가 작아 기본 행간이면 두 줄이 뚝 떨어져 보인다 */
.hero .hero-content h1 {
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
}
.hero .hero-content p {
    line-height: 1.5 !important;
}

/* ---------------------------------------------------------------
 * 공지사항 목록: 제목과 날짜를 각각 한 줄로
 *
 * 기본은 display:flex + space-between 이라 제목과 날짜가 한 줄에
 * 좌우로 붙는다. 좁은 화면에서는 제목이 눌려 읽기 어렵다.
 * 세로로 쌓고, 제목은 한 줄을 넘으면 말줄임 처리한다.
 *
 * 제목이 말줄임되려면 flex 자식의 min-width 를 0 으로 풀어야 한다.
 * 기본값 auto 면 내용 크기만큼 버텨서 overflow 가 걸리지 않는다.
 * --------------------------------------------------------------- */
.notice-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
}
.notice-item > div {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}
.notice-item .badge {
    flex-shrink: 0 !important;
}
.notice-item .title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ---------------------------------------------------------------
 * 여행후기 검색 버튼: 좁은 화면에서는 아이콘만
 *
 * 검색 입력창 · 검색 버튼 · 후기 작성 버튼이 한 줄에 들어가서
 * 폭이 부족하다. 검색 버튼의 글자를 빼 아이콘만 남긴다.
 * (index.blade.php 에서 글자를 <span class="txt"> 로 감싸 두었다.)
 * --------------------------------------------------------------- */
.rv-search button .txt {
    display: none !important;
}

/* ---------------------------------------------------------------
 * 여행후기 버튼 줄: 좁은 화면에서도 한 줄로
 *
 * 보기 화면(.review-footer)은 flex-wrap:wrap 이라 목록으로/수정/삭제가
 * 두 줄로 접힌다. 수정 화면(.rw-actions)은 640px 이하에서
 * flex-direction:column-reverse 로 아예 세로로 쌓는다.
 *
 * 둘 다 가로 한 줄로 두고, 버튼 폭을 flex:1 로 균등 분배한다.
 * 좌우 패딩과 글자 크기를 줄여야 3개가 들어간다.
 * --------------------------------------------------------------- */
.review-footer {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}
.review-footer .btn-list,
.review-footer .btn-edit,
.review-footer .btn-del {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}

.rw-actions {
    flex-direction: row !important;
}
.rw-actions a,
.rw-actions button {
    width: auto !important;
    flex: 1 1 0 !important;
    padding: 0 12px !important;
}

/* ---------------------------------------------------------------
 * 후기 카드 본문: 2줄까지만
 *
 * 상품 상세 / 맞춤여행의 후기 카드(.rv-list .rv)는 본문을 100자까지
 * 잘라 넣는데, 좁은 화면에서는 그게 3~4줄이 되어 카드가 길어진다.
 * 줄 수로 한 번 더 잘라 카드 높이를 고르게 맞춘다.
 *
 * -webkit-line-clamp 는 display:-webkit-box 와 -webkit-box-orient 가
 * 같이 있어야 동작한다. 셋 중 하나만 빠져도 그냥 안 잘린다.
 * --------------------------------------------------------------- */
.rv-list .rv h4 {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.rv-list .rv p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    /* 제목 바로 아래에 붙인다. 기본값 margin-top:6px 은 좁은 화면에서
       제목과 본문이 따로 노는 것처럼 보인다. */
    margin-top: 0 !important;
}

/* ---------------------------------------------------------------
 * 장바구니 하단 버튼: 한 줄로
 *
 * cart.blade.php 의 768px 블록이 .keep 을 flex:1 0 100% 로 두어
 * '더 담기'가 한 줄을 다 먹고 '예약하기'가 아래로 밀린다.
 * '더 담기'는 내용 폭만 쓰고 '예약하기'가 남는 폭을 가져가게 한다.
 * --------------------------------------------------------------- */
.cart-cta {
    flex-wrap: nowrap !important;
}
.cart-cta .keep {
    flex: 0 0 auto !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
}
.cart-cta .book {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 15px !important;
    white-space: nowrap !important;
}

/* ---------------------------------------------------------------
 * 페이지네이션: 좁은 화면에서는 가로 스크롤
 *
 * 페이지가 늘어나면 번호 버튼이 줄바꿈되거나 화면 밖으로 밀린다.
 * 한 줄로 두고 좌우로 밀어 보게 한다.
 *
 * justify-content 는 safe center 를 쓴다. 그냥 center 로 두면 내용이
 * 넘칠 때 왼쪽이 잘려 첫 페이지 버튼에 접근할 수 없다.
 * (미지원 브라우저에서는 이 선언이 무시되고 기존 center 가 남는다.)
 * --------------------------------------------------------------- */
.pagination-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: safe center !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pagination-wrap::-webkit-scrollbar { display: none; }
.pagination-wrap > * {
    flex-shrink: 0 !important;
}

/* ---------------------------------------------------------------
 * 검색 결과 - 인기 검색어 박스 높이
 *
 * .popular-keywords-box 는 flex:1 1 360px 로 되어 있다.
 * 데스크톱에서는 .page-title-row 가 가로 배치라 360px 가 '너비' 기준이지만,
 * 768px 이하에서 .page-title-row 가 flex-direction:column 으로 바뀌면서
 * 주축이 세로가 되고 그 360px 가 그대로 '높이'가 되어 버린다.
 * 그래서 키워드 한 줄짜리 박스가 360px 높이로 벌어졌다.
 *
 * 세로 배치에서는 내용 높이만 쓰도록 basis 를 풀어 준다.
 * --------------------------------------------------------------- */
.popular-keywords-box {
    flex: 0 0 auto !important;
}

/* ---------------------------------------------------------------
 * 좌측 메뉴 행 간격 축소
 *
 * 드로어(햄버거)와 마이페이지·고객센터 패널 모두 행이 넉넉해서
 * 항목이 늘어나면 스크롤이 길어진다. 조금씩 줄인다.
 *
 * 44px 아래로는 많이 내리지 않는다. 터치 정확도가 떨어진다.
 * home.blade.php 는 #homeMobileMenu .mobile-menu-utils a 로 특이도가
 * 더 높게 잡혀 있어 !important 가 필요하다.
 * --------------------------------------------------------------- */
.mobile-menu-list li a {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.mobile-menu-utils a {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.mp-menu a,
.cs-menu a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ---------------------------------------------------------------
 * 드로어 높이: 내용만큼만 + 탭바 위까지
 *
 * height:100vh + padding-bottom:80px 였다. 항목이 화면보다 짧으면
 * 마지막 항목(여행후기) 아래로 흰 여백이 170px 가까이 남았다.
 *
 * 하단 여백은 padding-bottom 을 12px 로 줄여 잡고, 높이는 화면 전체를 쓴다.
 * 하단 탭바보다 위에 오도록 z-index 를 올려서 탭바가 드로어를 덮지 않게 한다.
 * --------------------------------------------------------------- */
.mobile-menu {
    /* 화면을 꽉 채우고 하단 고정 탭바·CTA 바보다 위에 온다.
       탭바 위에서 끊던 height:calc(100vh - 64px) 는 드로어 안쪽에 탭바가
       겹쳐 보여서(가려주지 못해서) 되돌렸다. 항목이 넘치면 안에서 스크롤된다 */
    height: 100vh !important;
    max-height: none !important;
    padding-bottom: 12px !important;
    box-sizing: border-box !important;
    z-index: 1001 !important;
}
/* 어둡게 덮는 막도 탭바·CTA 바 위로 올린다 (드로어 바로 아래 층) */
.mobile-menu-overlay {
    z-index: 1000 !important;
}

/* ---------------------------------------------------------------
 * 드로어 헤더('메뉴' + 닫기): 여백 축소 + 상단 고정
 *
 * 기본은 padding:16px 20px 이고 그냥 흘러가는 요소라, 목록을 내리면
 * 헤더가 위로 사라져 닫기 버튼을 누르려면 다시 올려야 했다.
 *
 * .mobile-menu 가 overflow-y:auto 인 스크롤 컨테이너라
 * 그 안에서 sticky 가 그대로 동작한다.
 * 배경색을 지정하지 않으면 아래 항목이 헤더를 통과해 비쳐 보인다.
 * --------------------------------------------------------------- */
.mobile-menu-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ---------------------------------------------------------------
 * 드로어: 카테고리 목록과 마이페이지 블록 사이 구분선
 *
 * 고객센터 블록은 blade 에 인라인으로 border-top 이 붙어 있는데
 * 마이페이지 블록만 빠져 있어 카테고리와 그대로 이어져 보인다.
 * 목록(.mobile-menu-list) 바로 뒤에 오는 블록에만 선을 준다.
 * --------------------------------------------------------------- */
.mobile-menu-list + .mobile-menu-utils {
    border-top: 1px solid #E5E7EB !important;
    margin-top: 2px !important;
    padding-top: 6px !important;
}

/* 구분선 주변 여백 축소 - 카테고리 목록 끝과 아래 블록이 너무 벌어져 있었다 */
.mobile-menu-list {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.mobile-menu-utils {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* ---------------------------------------------------------------
 * 모바일 상단 재구성 (상단배너 + 검색 + 대분류 고정)
 *
 * 기존 모바일 헤더는 로고 한 줄(56px)만 남기고 검색·대분류를 모두 숨겼다.
 * 상단배너 / 검색 / 대분류를 한 덩어리로 항상 화면 위에 붙여 둔다.
 * (header.css 의 모바일 블록이 상단을 static 으로 풀어 두므로 여기서 되돌린다)
 *
 * - 로고 옆에 검색창을 되살린다
 * - 대분류는 화면에 5개만 보이고 나머지는 가로로 밀린다
 * - 오른쪽 상단 더보기(전체메뉴)와 고객센터 유틸은 이 줄에 두지 않는다.
 *   전체메뉴는 하단 탭바의 '메뉴'로 연다.
 * --------------------------------------------------------------- */
@media (max-width: 768px) {
    header.header .header-inner {
        height: 56px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 0 16px !important;
    }

    /* 로고 옆 검색창 (header.css 모바일 블록의 display:none 을 되돌린다) */
    header.header .header-inner > .search-box {
        display: block !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    header.header .header-inner > .search-box input {
        height: 38px !important;
        padding: 0 40px 0 14px !important;
        font-size: 14px !important;
        border-radius: 19px !important;
    }
    header.header .header-inner > .search-box button { width: 40px !important; }

    /* 검색창 오른쪽에 출발확정 캘린더 진입 (아이콘만) */
    header.header .header-inner > .calendar-entry {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 10px;
    }
    header.header .header-inner > .calendar-entry i { font-size: 20px; }
    /* 로고 파랑(#2786EA)과 같은 색조를 조금 어둡게 (밝기만 낮춘 값) */
    header.header .header-inner > .calendar-entry .calendar-icon { width: 24px; height: 24px; color: #1570D1; }
    header.header .header-inner > .calendar-entry span { display: none; }

    /* 대분류 줄: 5개 노출 + 나머지는 가로 슬라이드 */
    header.header .gnb { display: block !important; }
    header.header .gnb .container {
        display: block !important;
        padding: 0 !important;
    }
    header.header .gnb .gnb-list {
        height: 44px !important;
        gap: 0 !important;
        padding: 0 4px !important;   /* 항목 자체 여백 12px 과 합쳐 좌우 16px */
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    header.header .gnb .gnb-list::-webkit-scrollbar { display: none; }
    /* 항목 폭은 글자 수를 따른다. 균등 분할이 아니라 라벨 길이 + 좌우 여백.
       그래서 항목이 많으면 다음 항목이 화면 오른쪽에 자연스럽게 걸쳐 보인다
       (옆으로 넘길 수 있다는 신호) */
    header.header .gnb .gnb-list li {
        flex: 0 0 auto !important;
        text-align: center;
    }
    header.header .gnb .gnb-list li a {
        display: block;
        padding: 10px 12px !important;
        font-size: 15px !important;
        white-space: nowrap;
    }
    /* 오른쪽 상단 더보기(전체메뉴) · 고객센터 유틸은 숨긴다 */
    header.header .gnb .gnb-list li:first-child { display: none !important; }
    header.header .gnb .gnb-utils { display: none !important; }

    /* ── 상단 영역 항상 고정 ──
       header.css 의 모바일 블록이 상단배너/헤더를 position:static 으로 풀고
       body.has-top-banner .header 로 top:auto 까지 걸어 둬서, 스크롤하면
       배너·검색·대분류가 통째로 위로 사라졌다. 여기서 되돌린다.

       sticky 라 문서 흐름에 그대로 들어가므로 자리를 비우는 padding 은 필요 없다.
       배너를 닫으면 --top-banner-h 가 지워져 헤더가 top:0 으로 올라붙는다.
       (데스크톱도 배너 고정 + 헤더 top:배너높이 로 같은 구조다) */
    /* layouts/app.blade.php 의 html,body{height:100%} 가 body 높이를 화면 한 장으로
       묶어 버려서, sticky 가 그 범위를 넘어가면(=한 화면 넘게 내리면) 풀렸다.
       메인은 자체 레이아웃이라 영향이 없어 서브 페이지에서만 드러났다.
       바닥에 붙는 푸터는 min-height:100vh + .main-content{flex:1 0 auto} 로 그대로 유지된다 */
    body {
        height: auto !important;
        min-height: 100vh;
    }

    #topBanner.top-banner {
        position: sticky !important;
        top: 0 !important;
    }
    body header.header,
    body.has-top-banner header.header {
        position: sticky !important;
        top: var(--top-banner-h, 0px) !important;
    }
}

/* ---------------------------------------------------------------
 * 페이징 - 좁은 화면에서는 5칸까지만
 *
 * 쪽 번호를 전부 뿌리면 7쪽만 넘어가도 화면 밖으로 흘러넘친다.
 * 뷰에서 현재 쪽을 가운데 둔 5칸을 잡고 그 밖에는 pg-far 를 붙여 두었다.
 * 이 파일은 <link media="(max-width:768px)"> 로 실려서 데스크톱에는 닿지 않는다.
 * --------------------------------------------------------------- */
.pagination-wrap .page-num.pg-far,
.rsv-paging .pg-num.pg-far,
.pager .page-num.pg-far { display: none; }