/* ==========================================================================
   (주)투어수다 - 상단 여행지 검색 결과 (shop/suda_search.php)
   상품카드는 메인과 동일한 .suda-product-grid / .suda-product-card(css/home.css)를 그대로 쓴다.
   ========================================================================== */

/* 사이트 공통 #wrapper 배경(#f6f6f6) 대신 검색결과 페이지만 흰색 */
/* #wrapper:has(#sudaSearch){ background: #fff; } - 2026-10-24: 페이지 배경은 css/default_shop.css(body·#wrapper) 한 곳에서 관리 */

.suda-srch{
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 24px 96px;
    box-sizing: border-box;
}

.suda-srch-title{
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 700;
    color: var(--suda-gray-900, #111827);
    letter-spacing: -0.02em;
}
.suda-srch-title em{
    font-style: normal;
    color: var(--suda-blue, #4154ff);
}

/* 탭: 선택된 탭만 위/좌/우 테두리가 진하고 아래가 열린 형태 */
.suda-srch-tabs{
    display: flex;
    border-bottom: 1px solid var(--suda-gray-900, #111827);
}
.suda-srch-tab{
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 60px;
    margin: 0 0 -1px -1px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--suda-gray-200, #e5e7eb);
    border-bottom: 1px solid var(--suda-gray-900, #111827);
    font-size: 16px;
    color: var(--suda-gray-700, #374151);
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease;
}
.suda-srch-tab:first-child{ margin-left: 0; }
.suda-srch-tab:hover{ color: var(--suda-gray-900, #111827); }
.suda-srch-tab span{
    margin-left: 2px;
    font-size: 13px;
    color: var(--suda-gray-400, #9ca3af);
}
.suda-srch-tab.is-active{
    z-index: 1;
    border-color: var(--suda-gray-900, #111827);
    border-bottom-color: #fff;
    color: var(--suda-blue, #4154ff);
    font-weight: 700;
}
.suda-srch-tab.is-active span{ color: var(--suda-blue, #4154ff); }

.suda-srch-panel{ margin-top: 48px; }

.suda-srch-group + .suda-srch-group{ margin-top: 64px; }
.suda-srch-group-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--suda-gray-900, #111827);
}
.suda-srch-group-head h2{
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--suda-gray-900, #111827);
}
.suda-srch-group-head h2 span{
    margin-left: 4px;
    font-size: 15px;
    font-weight: 400;
    color: var(--suda-gray-500, #6b7280);
}

.suda-srch-more{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: var(--suda-gray-700, #374151);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.suda-srch-more:hover{
    border-color: var(--suda-gray-900, #111827);
    color: var(--suda-gray-900, #111827);
}

.suda-srch-note{
    margin: 48px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--suda-gray-500, #6b7280);
}

.suda-srch-empty{
    padding: 120px 0;
    text-align: center;
    color: var(--suda-gray-500, #6b7280);
}
.suda-srch-empty > i{
    font-size: 48px;
    color: #d1d5db;
}
.suda-srch-empty p{
    margin: 16px 0 0;
    font-size: 17px;
}

/* 탭이 많아지는 좁은 화면: 가로 스크롤 */
@media (max-width: 768px){
    .suda-srch-tabs{
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .suda-srch-tabs::-webkit-scrollbar{ display: none; }
    .suda-srch-tab{ flex: 0 0 auto; }
}




@media screen and (max-width:1024px) {
    .suda-srch{ padding-top: 5.47vw; padding-inline: 2.34vw; padding-bottom: 9.38vw; }
    .suda-srch-title{ font-size: 2.73vw; margin-bottom: 2.34vw; }
    .suda-srch-tab{ height: 5.86vw; font-size: 1.56vw; padding-inline: 1.17vw; }
    .suda-srch-tab span{ font-size: 1.27vw; }
    .suda-srch-panel{ margin-top: 4.69vw; }
    .suda-srch-group + .suda-srch-group{ margin-top: 6.25vw; }
    .suda-srch-group-head{ padding-bottom: 1.37vw; margin-bottom: 2.34vw; }
    .suda-srch-group-head h2{ font-size: 1.95vw; }
    .suda-srch-group-head h2 span{ font-size: 1.46vw; }
    .suda-srch-more{ font-size: 1.27vw; padding-block: 0.78vw; padding-inline: 1.37vw; }
    .suda-srch-note{ font-size: 1.27vw; }
    .suda-srch-empty{ padding-block: 11.72vw; }
    .suda-srch-empty > i{ font-size: 4.69vw; }
    .suda-srch-empty p{ font-size: 1.66vw; }
}




@media screen and (max-width:768px) {
    .suda-srch{ padding-top: 7.29vw; padding-inline: 3.13vw; padding-bottom: 12.50vw; }
    .suda-srch-title{ font-size: 3.65vw; margin-bottom: 3.13vw; }
    .suda-srch-tab{ height: 7.81vw; font-size: 2.08vw; padding-inline: 2.60vw; }
    .suda-srch-tab span{ font-size: 1.69vw; }
    .suda-srch-panel{ margin-top: 6.25vw; }
    .suda-srch-group + .suda-srch-group{ margin-top: 8.33vw; }
    .suda-srch-group-head{ padding-bottom: 1.82vw; margin-bottom: 3.13vw; }
    .suda-srch-group-head h2{ font-size: 2.60vw; }
    .suda-srch-group-head h2 span{ font-size: 1.95vw; }
    .suda-srch-more{ font-size: 1.69vw; padding-block: 1.04vw; padding-inline: 1.82vw; }
    .suda-srch-note{ font-size: 1.69vw; }
    .suda-srch-empty{ padding-block: 15.63vw; }
    .suda-srch-empty > i{ font-size: 6.25vw; }
    .suda-srch-empty p{ font-size: 2.21vw; }
}




@media screen and (max-width:480px) {
    .suda-srch{ padding-top: 11.67vw; padding-inline: 5.00vw; padding-bottom: 20.00vw; }
    .suda-srch-title{ font-size: 5.42vw; margin-bottom: 5.00vw; }
    .suda-srch-tab{ height: 11.67vw; font-size: 3.33vw; padding-inline: 4.17vw; }
    .suda-srch-tab span{ font-size: 2.71vw; }
    .suda-srch-panel{ margin-top: 8.33vw; }
    .suda-srch-group + .suda-srch-group{ margin-top: 11.67vw; }
    .suda-srch-group-head{ padding-bottom: 2.92vw; margin-bottom: 5.00vw; }
    .suda-srch-group-head h2{ font-size: 4.17vw; }
    .suda-srch-group-head h2 span{ font-size: 3.13vw; }
    .suda-srch-more{ font-size: 2.71vw; padding-block: 1.67vw; padding-inline: 2.92vw; }
    .suda-srch-note{ font-size: 2.71vw; }
    .suda-srch-empty{ padding-block: 25.00vw; }
    .suda-srch-empty > i{ font-size: 10.00vw; }
    .suda-srch-empty p{ font-size: 3.54vw; }
}


/* ==========================================================================
   SUDA CUSTOM (2026-10-24): 조건 검색 상단 (메인·카테고리 검색창에서 왔을 때만)
   왼쪽 도착지(크게, 누르면 자동완성) / 오른쪽 출발지·날짜 버튼, 아래 구분선. 모바일은 두 줄
   ========================================================================== */
.suda-srch-cond{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 32px;
    border-bottom: 2px solid var(--suda-gray-900, #111827);
}
.suda-srch-dest{ position: relative; min-width: 0; }
.suda-srch-dest-title{ margin: 0; }
.suda-srch-dest-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--suda-gray-900, #111827);
    cursor: pointer;
}
.suda-srch-dest-btn span{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.suda-srch-dest-btn svg{ width: 22px; height: 22px; flex-shrink: 0; transition: transform .15s ease; }
.suda-srch-dest-btn[aria-expanded="true"] svg{ transform: rotate(180deg); }
.suda-srch-dest-btn:focus-visible, .suda-srch-chip:focus-visible, .suda-srch-dep-list li:focus-visible{ outline: 3px solid rgba(65, 84, 255, .35); outline-offset: 2px; }

.suda-srch-cond-right{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.suda-srch-depbox{ position: relative; }
.suda-srch-chip{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--suda-gray-200, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--suda-gray-900, #111827);
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color .15s ease;
}
.suda-srch-chip:hover, .suda-srch-chip[aria-expanded="true"]{ border-color: var(--suda-blue, #4154ff); }
.suda-srch-chip svg{ width: 18px; height: 18px; color: var(--suda-gray-500, #6b7280); flex-shrink: 0; }
.suda-srch-dep-btn{ min-width: 180px; }
.suda-srch-date{ min-width: 280px; }
.suda-srch-date.is-empty span{ color: var(--suda-gray-500, #6b7280); }
.suda-srch-date-clear{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--suda-gray-100, #f3f4f6);
    color: var(--suda-gray-500, #6b7280);
    cursor: pointer;
}
.suda-srch-date-clear svg{ width: 16px; height: 16px; }

/* 팝업 (도착지 자동완성 / 출발지 목록) */
.suda-srch-pop{
    position: absolute;
    top: calc(100% + 6px);
    z-index: 40;
    background: #fff;
    border: 1px solid var(--suda-gray-200, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(17, 17, 17, .12);
    box-sizing: border-box;
}
.suda-srch-dest-pop{ left: 0; width: 360px; padding: 10px; }
.suda-srch-dest-field{
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--suda-blue, #4154ff);
    border-radius: 10px;
}
.suda-srch-dest-field svg{ width: 18px; height: 18px; color: var(--suda-gray-400, #9ca3af); }
.suda-srch-dest-field input{ flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 15px; background: none; }
.suda-srch-dest-list{ max-height: 300px; margin: 8px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.suda-srch-dest-list:empty{ display: none; }
.suda-srch-dest-list li{ display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.suda-srch-dest-list li strong{ font-size: 14px; font-weight: 600; color: var(--suda-gray-900, #111827); }
.suda-srch-dest-list li span{ font-size: 12px; color: var(--suda-gray-500, #6b7280); }
.suda-srch-dest-list li:hover, .suda-srch-dest-list li.is-active{ background: #eef0ff; }

.suda-srch-dep-pop{ left: 0; right: 0; min-width: 180px; padding: 6px; }
.suda-srch-dep-list{ margin: 0; padding: 0; list-style: none; }
.suda-srch-dep-list li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--suda-gray-700, #374151);
    cursor: pointer;
}
.suda-srch-dep-list li svg{ width: 16px; height: 16px; color: var(--suda-blue, #4154ff); visibility: hidden; }
.suda-srch-dep-list li:hover{ background: var(--suda-gray-50, #f9fafb); }
.suda-srch-dep-list li.is-selected{ color: var(--suda-blue, #4154ff); font-weight: 700; }
.suda-srch-dep-list li.is-selected svg{ visibility: visible; }
.suda-srch-dep-done{
    width: 100%;
    height: 42px;
    margin-top: 6px;
    border: 0;
    border-radius: 8px;
    background: var(--suda-blue, #4154ff);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.suda-srch-dep-done:hover{ background: var(--suda-blue-dark, #3443cc); }

/* 호텔 안내 / 결과 없음 맞춤여행 버튼 */
.suda-srch-note--hotel{ margin: 0 0 16px; text-align: left; }
.suda-srch-custom-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    padding: 14px 24px;
    border-radius: 12px;
    background: #eef0ff;
    color: var(--suda-gray-700, #374151);
    font-size: 15px;
    text-decoration: none;
}
.suda-srch-custom-btn strong{ color: var(--suda-blue, #4154ff); }
.suda-srch-custom-btn:hover{ background: #e0e4ff; }

@media screen and (max-width:1024px) {
    .suda-srch-cond{ gap: 1.56vw; padding-bottom: 1.56vw; margin-bottom: 3.13vw; }
    .suda-srch-dest-btn{ font-size: 2.93vw; }
    .suda-srch-chip{ height: 4.49vw; font-size: 1.46vw; padding-inline: 1.56vw; }
    .suda-srch-dep-btn{ min-width: 17.58vw; }
    .suda-srch-date{ min-width: 25vw; }
    .suda-srch-custom-btn{ font-size: 1.46vw; }
}

@media screen and (max-width:768px) {
    /* 두 줄: 도착지 / 출발지·날짜 */
    .suda-srch-cond{ flex-direction: column; align-items: stretch; gap: 2.6vw; padding-bottom: 2.6vw; margin-bottom: 4.17vw; }
    .suda-srch-dest-btn{ font-size: 3.91vw; }
    .suda-srch-cond-right{ width: 100%; gap: 1.3vw; }
    .suda-srch-depbox{ flex: 0 0 40%; }
    .suda-srch-dep-btn{ width: 100%; min-width: 0; }
    .suda-srch-date{ flex: 1; min-width: 0; }
    .suda-srch-date span{ overflow: hidden; text-overflow: ellipsis; }
    .suda-srch-chip{ height: 6vw; font-size: 1.95vw; padding-inline: 1.82vw; }
    .suda-srch-dest-pop{ width: min(360px, 93.75vw); }
    .suda-srch-custom-btn{ font-size: 1.95vw; }
}

@media screen and (max-width:480px) {
    .suda-srch-cond{ gap: 3.33vw; padding-bottom: 3.33vw; margin-bottom: 5vw; }
    .suda-srch-dest-btn{ font-size: 6.25vw; }
    .suda-srch-cond-right{ gap: 1.67vw; }
    .suda-srch-chip{ height: 10.42vw; font-size: 3.33vw; padding-inline: 2.5vw; gap: 1.25vw; }
    .suda-srch-chip svg{ width: 3.75vw; height: 3.75vw; }
    .suda-srch-dest-pop{ width: 90vw; }
    .suda-srch-custom-btn{ flex-wrap: wrap; justify-content: center; font-size: 3.33vw; padding: 3.33vw 5vw; }
}