/* ==========================================================================
   (주)투어수다 - 메인 히어로 슬라이더 (index.php)
   ========================================================================== */

.suda-hero{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 800px;
    overflow: hidden;
    background: #111827;
}

/* 배경 슬라이드 */
.suda-hero-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
}
.suda-hero-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.2s ease, transform 8s linear;
}
.suda-hero-slide.is-active{
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}
.suda-hero-slide img,
.suda-hero-slide video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.suda-hero-dim{
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.2) 45%, rgba(0,0,0,.6));
}

/* 텍스트 + 검색 영역 */
.suda-hero-content{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 90px 20px 56px;
    text-align: center;
}

.suda-hero-copy{
    display: none;
}
.suda-hero-copy.is-active{
    display: block;
    animation: suda-hero-fade-up .7s ease both;
}
@keyframes suda-hero-fade-up{
    from{ opacity: 0; transform: translateY(24px); }
    to{ opacity: 1; transform: translateY(0); }
}

.suda-hero-title{
    color: #fff;
    font-weight: 700;
    letter-spacing: -.02em;
    text-shadow: 0 8px 30px rgba(0,0,0,.35);
    text-transform: uppercase;
    margin: 0 0 20px;
}
.suda-hero-title-main{
    display: block;
    font-size: 76px;
    margin-bottom: 6px;
}
.suda-hero-title-sub{
    display: block;
    font-size: 45px;
    color: oklch(78.5% 0.115 274.713);
    line-height: 1.25;
}
.suda-hero-desc{
    color: rgba(255,255,255,.9);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.6;
    max-width: 672px;
    margin: 0 auto 36px;
}

/* 검색 카드 */
.suda-hero-search{
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 10px;
    max-width: 100%; /* 히어로 콘텐츠 영역(.suda-hero-content, 최대 1280px) 폭에 맞춤 */
    margin: 0 auto;
    box-shadow: 0 30px 60px rgba(0,0,0,.25);
    box-sizing: border-box;
}
/* 안쪽 흰 검색바. 칸 배치는 공통 검색창 css/suda_searchform.css (.suda-sf--hero) */
.suda-hero-search form{
    background: #fff;
    border-radius: 999px;
    padding: 8px;
    box-sizing: border-box;
}
.suda-hero-field{
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-radius: 999px;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}
.suda-hero-field:hover{ background: var(--suda-gray-50, #f9fafb); }
.suda-hero-field.suda-hero-guests{ padding: 0; }
.suda-hero-field > i{
    color: var(--suda-blue, #2563eb);
    font-size: 19px;
    flex-shrink: 0;
}
.suda-hero-field-body{ flex: 1; min-width: 0; }
.suda-hero-field-label{
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--suda-gray-400, #9ca3af);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 3px;
}
.suda-hero-field input{
    width: 100%;
    border: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--suda-gray-900, #111827);
    background: transparent;
}
.suda-hero-field input::placeholder{ color: #d1d5db; }

.suda-hero-guests-btn{
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: none;
    border: 0;
    padding: 14px 20px;
    border-radius: 999px;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}
.suda-hero-guests-btn:hover{ background: var(--suda-gray-50, #f9fafb); }
.suda-hero-guests-btn i{ color: var(--suda-blue, #2563eb); font-size: 19px; }
.suda-hero-guests-value{ font-size: 16px; font-weight: 700; color: var(--suda-gray-900, #111827); }

.suda-hero-guests-pop{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 12px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--suda-gray-100, #f3f4f6);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(17,24,39,.18);
    z-index: 30;
    min-width: 280px;
}
.suda-hero-guests.is-open .suda-hero-guests-pop{ display: block; }
.suda-hero-guests-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.suda-hero-guests-row + .suda-hero-guests-row{ margin-top: 20px; }
.suda-hero-guests-name{ font-weight: 700; color: var(--suda-gray-900, #111827); font-size: 16px; margin: 0; }
.suda-hero-guests-note{ font-size: 11px; font-weight: 700; color: var(--suda-gray-400, #9ca3af); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.suda-hero-stepper{ display: flex; align-items: center; gap: 12px; }
.suda-step-btn{
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--suda-gray-200, #e5e7eb);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--suda-gray-700, #374151);
    cursor: pointer;
}
.suda-step-btn:hover{ background: var(--suda-gray-50, #f9fafb); }
.suda-step-value{ font-weight: 700; color: var(--suda-gray-900, #111827); width: 20px; text-align: center; }

.suda-hero-submit{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--suda-blue, #2563eb);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(37,99,235,.3);
    box-sizing: border-box;
}
.suda-hero-submit i{
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.suda-hero-submit:hover{ background: var(--suda-blue-dark, #1d4ed8); }
.suda-hero-submit:active{ transform: scale(.97); }

/* 인디케이터 */
.suda-hero-indicators{
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
}
.suda-hero-dot{
    background: none;
    border: 0;
    padding: 6px 0;
    cursor: pointer;
}
.suda-hero-dot-bar{
    display: block;
    height: 4px;
    width: 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.35);
    overflow: hidden;
    transition: width .4s ease, background .2s ease;
}
.suda-hero-dot:hover .suda-hero-dot-bar{ background: rgba(255,255,255,.55); }
.suda-hero-dot.is-active .suda-hero-dot-bar{ width: 44px; }
.suda-hero-dot-fill{
    display: block;
    height: 100%;
    width: 0;
    background: #60a5fa;
    border-radius: 999px;
}
.suda-hero-dot.is-active .suda-hero-dot-fill{
    animation: suda-hero-fill 8s linear forwards;
}
@keyframes suda-hero-fill{
    from{ width: 0; }
    to{ width: 100%; }
}
.suda-hero-count{
    margin-left: 8px;
    padding: 4px 10px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
}

/* 바깥 반투명 박스는 고정 높이 없이 padding 으로만 여백을 잡는다 → 안쪽 흰 검색바와의 간격이 사방 동일
   (바깥 간격 = padding + 테두리 1px). 모서리는 바깥 radius = 안쪽 radius + 간격 이어야 곡선이 평행하다.
   PC/태블릿은 둘 다 완전한 알약형(999px)이라 자동으로 평행, 모바일은 아래 미디어쿼리에서 값을 맞춘다. */
/* 769~1024px: 검색바가 두 줄이 되므로 알약형 대신 둥근 사각. 바깥 radius = 안쪽 radius + 간격(패딩 0.98vw + 테두리 1px) */
@media (min-width: 769px) and (max-width: 1024px){
    .suda-hero-search{ border-radius: 3.91vw; }
    .suda-hero-search form{ border-radius: 2.83vw; }
}




@media screen and (max-width:1024px) {
    .suda-hero{ height: auto; min-height: 70vh; } /* 검색창이 세로로 길어져도 잘리지 않게 (고정 높이 → 최소 높이) */
    .suda-hero-title-main{ font-size: 7.42vw; }
    .suda-hero-title-sub{ font-size: 4.39vw; }
    .suda-hero-desc{ font-size: 1.95vw; }
    .suda-hero-field > i{ font-size: 1.86vw; }
    .suda-hero-field-label{ font-size: 1.07vw; }
    .suda-hero-search{ padding: 0.98vw; }
    .suda-hero-field input{ font-size: 1.56vw; }
    .suda-hero-guests-btn i{ font-size: 1.86vw; }
    .suda-hero-guests-value{ font-size: 1.56vw; }
    .suda-hero-guests-name{ font-size: 1.56vw; }
    .suda-hero-guests-note{ font-size: 1.07vw; }
    .suda-hero-submit{ font-size: 1.76vw; }
    .suda-hero-count{ font-size: 1.07vw; }
}




@media screen and (max-width:768px) {
    /* 바깥 30px / 간격 11px(패딩 10px + 테두리 1px) / 안쪽 19px (768px 기준) */
    .suda-hero-search{ border-radius: 3.91vw; padding: 1.30vw; }
    .suda-hero-search form{ border-radius: 2.47vw; }
    .suda-hero{ height: auto; min-height: 60vh; } /* 검색창이 세로로 길어져도 잘리지 않게 (고정 높이 → 최소 높이) */
    .suda-hero-title-main{ font-size: 7.29vw; }
    .suda-hero-title-sub{ font-size: 4.17vw; }
    .suda-hero-desc{ font-size: 2.08vw; }
    .suda-hero-field > i{ font-size: 2.47vw; }
    .suda-hero-field-label{ font-size: 1.43vw; }
    .suda-hero-field input{ font-size: 2.08vw; }
    .suda-hero-guests-btn i{ font-size: 2.47vw; }
    .suda-hero-guests-value{ font-size: 2.08vw; }
    .suda-hero-guests-name{ font-size: 2.08vw; }
    .suda-hero-guests-note{ font-size: 1.43vw; }
    .suda-hero-submit{ font-size: 2.34vw; }
    .suda-hero-count{ font-size: 1.43vw; }
}




@media screen and (max-width:480px) {
    /* 바깥 30px / 간격 11px / 안쪽 19px (480px 기준) */
    .suda-hero-search{ border-radius: 6.25vw; padding: 2.08vw; }
    .suda-hero-search form{ border-radius: 3.96vw; }
    .suda-hero{ height: auto; min-height: 55vh; } /* 검색창이 세로로 길어져도 잘리지 않게 (고정 높이 → 최소 높이) */
    .suda-hero-title-main{ font-size: 9.58vw; }
    .suda-hero-title-sub{ font-size: 5.83vw; }
    .suda-hero-desc{ font-size: 3.33vw; }
    .suda-hero-field > i{ font-size: 3.96vw; }
    .suda-hero-field-label{ font-size: 2.29vw; }
    .suda-hero-field input{ font-size: 3.33vw; }
    .suda-hero-guests-btn i{ font-size: 3.96vw; }
    .suda-hero-guests-value{ font-size: 3.33vw; }
    .suda-hero-guests-name{ font-size: 3.33vw; }
    .suda-hero-guests-note{ font-size: 2.29vw; }
    .suda-hero-submit{ font-size: 3.75vw; }
    .suda-hero-count{ font-size: 2.29vw; }
}


/* P6(2026-10-16): 관리자 슬라이드 링크 버튼 (링크 URL이 있는 슬라이드에만 노출) */
.suda-hero-link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -16px 0 28px;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.5);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    backdrop-filter: blur(4px);
}
.suda-hero-link:hover{ background: rgba(255,255,255,.3); color: #fff; }