/* 스파 페이지 공통 CSS */
/* PC 화면 폭을 하단 폭(1280px)에 맞춤 */

/* 컨테이너 스타일 - 하단 폭에 맞춤 */
.container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 스파 메인 히어로 섹션 - 메뉴바와 겹치지 않도록 조정 (레이아웃만) */
.spa-main-hero {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    clear: both;
    margin-top: 0;
}
/* 시각적 스타일은 spa-index.css에서 정의 */

/* 스파 상세 히어로 섹션 - 메뉴바와 겹치지 않도록 조정 */
.spa-detail-hero {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    clear: both;
    margin-top: 0;
}

/* wrapper 밖에 있는 히어로 섹션 - 메뉴바와 겹치지 않도록 */
body > .spa-main-hero,
body > .spa-detail-hero,
#wrapper ~ .spa-main-hero,
#wrapper ~ .spa-detail-hero,
hr ~ .spa-main-hero,
hr ~ .spa-detail-hero {
    margin-top: 0;
}

/* 메뉴바 높이 계산: #hd_wrapper(140px) + #gnb(55px) = 195px */
/* wrapper 밖 히어로 섹션은 hr 태그 다음에 오므로 추가 여백 불필요 */

/* 테마별 추천 메뉴 - 한 줄 배치 */
.theme-recommendation-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 15px;
    flex-wrap: nowrap;
    width: 100%;
}

.theme-icon-card {
    flex: 1;
    text-decoration: none;
    color: inherit;
    min-width: 0; /* flexbox에서 최소 너비 제한 제거 */
}

.theme-card-bg {
    color: white;
    padding: 25px 15px;
    text-align: center;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.theme-card-bg:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.theme-icon {
    font-size: 40px;
    margin-bottom: 12px;
    line-height: 1;
}

.theme-card-bg h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3;
}

.theme-card-bg p {
    margin: 0;
    font-size: 13px;
    opacity: 0.95;
    line-height: 1.3;
}

/* 테마별 색상 */
.theme-card-couple {
    background: #ff6b6b;
    box-shadow: 0 4px 12px rgba(255,107,107,0.3);
}

.theme-card-pickup {
    background: #4ecdc4;
    box-shadow: 0 4px 12px rgba(78,205,196,0.3);
}

.theme-card-family {
    background: #95e1d3;
    box-shadow: 0 4px 12px rgba(149,225,211,0.3);
}

.theme-card-korean {
    background: #f38181;
    box-shadow: 0 4px 12px rgba(243,129,129,0.3);
}

.theme-card-solo {
    background: #a8e6cf;
    box-shadow: 0 4px 12px rgba(168,230,207,0.3);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    /* 테마별 추천 - 좌우 슬라이드 */
    .theme-recommendation-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: #667eea #f0f0f0;
        padding-bottom: 10px;
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .theme-recommendation-row::-webkit-scrollbar {
        height: 6px;
    }
    
    .theme-recommendation-row::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 3px;
    }
    
    .theme-recommendation-row::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 3px;
    }
    
    .theme-icon-card {
        flex: 0 0 140px;
        min-width: 140px;
        max-width: 140px;
        scroll-snap-align: start;
        text-decoration: none;
    }
    
    .theme-card-bg {
        padding: 18px 12px;
        min-height: 130px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .theme-icon {
        font-size: 32px;
        margin-bottom: 8px;
    }
    
    .theme-card-bg h3 {
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    .theme-card-bg p {
        font-size: 11px;
        line-height: 1.2;
    }
    
    /* 터치 최적화 */
    .theme-icon-card {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
        touch-action: manipulation;
    }
}

/* wrapper 내부 첫 번째 스파 히어로 섹션 */
#wrapper > .spa-main-hero:first-child,
#wrapper > .spa-detail-hero:first-child,
#container_wr > .spa-main-hero:first-child,
#container_wr > .spa-detail-hero:first-child {
    margin-top: 0;
}

/* 스파 페이지에서 #container 내부 첫 번째 요소가 히어로 섹션인 경우 */
#container > .spa-main-hero:first-child,
#container > .spa-detail-hero:first-child {
    margin-top: 0;
}

/* wrapper 시작 부분에 스파 히어로 섹션이 있을 경우 - 상단 여백 제거 */
#wrapper:first-child .spa-main-hero,
#wrapper:first-child .spa-detail-hero {
    margin-top: 0;
}

/* container_wr 시작 부분에 스파 히어로 섹션이 있을 경우 */
#container_wr:first-child .spa-main-hero,
#container_wr:first-child .spa-detail-hero {
    margin-top: 0;
}

/* 스파 리스트 헤더 - 메뉴바와 겹치지 않도록 조정 */
.spa-list-header {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
    margin-top: 0;
}

/* 스파 필터 박스 */
.spa-filter-box {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto 20px;
    padding: 20px;
    box-sizing: border-box;
}

/* 스파 리스트 */
.spa-list {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 반응형 대응 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
        max-width: 100%;
    }
    .spa-main-hero,
    .spa-detail-hero,
    .spa-list-header,
    .spa-filter-box,
    .spa-list {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }
    
    /* 리스트 헤더 모바일 최적화 */
    .spa-list-header {
        padding: 20px 15px;
    }
    .spa-list-header h1 {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }
    
    /* 필터 박스 모바일 최적화 */
    .spa-filter-box {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    /* 스파 리스트 아이템 모바일 최적화 */
    .spa-list-item {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    .spa-list-thumb {
        width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
        margin-bottom: 15px;
    }
    
    /* 버튼 모바일 최적화 - 터치 타겟 */
    .btn {
        padding: 10px 20px;
        font-size: 14px;
        min-height: 44px; /* 터치 타겟 최소 크기 */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-lg {
        padding: 12px 24px;
        font-size: 16px;
        min-height: 48px;
    }
    .btn-sm {
        padding: 6px 12px;
        font-size: 12px;
        min-height: 36px;
    }
    
    /* 입력 필드 모바일 최적화 */
    input[type="text"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important; /* iOS 자동 줌 방지 */
        min-height: 44px;
    }
    
    /* 이미지 최적화 */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    /* 텍스트 가독성 개선 */
    p, span, div {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    
    /* 섹션 간격 조정 */
    section {
        margin-bottom: 30px;
    }
    
    /* 헤딩 크기 조정 */
    h1 {
        font-size: 26px !important;
        line-height: 1.3;
    }
    h2 {
        font-size: 22px !important;
        line-height: 1.3;
    }
    h3 {
        font-size: 18px !important;
        line-height: 1.3;
    }
    
    /* 스크롤 최적화 */
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* 작은 모바일 화면 (480px 이하) 추가 최적화 */
@media (max-width: 480px) {
    .theme-icon-card {
        flex: 0 0 120px;
        min-width: 120px;
        max-width: 120px;
    }
    .theme-card-bg {
        padding: 15px 10px;
        min-height: 120px;
    }
    .theme-icon {
        font-size: 28px;
    }
    .theme-card-bg h3 {
        font-size: 13px;
    }
    .theme-card-bg p {
        font-size: 10px;
    }
    .spa-list-item {
        padding: 12px !important;
    }
    .spa-list-thumb {
        height: 160px !important;
    }
    .spa-filter-box {
        padding: 12px;
    }
}