/* 기본 스타일 */
html {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}

body {
    font-family: 'Pretendard', sans-serif;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

/* 헤더 스타일 */
#main-header {
    z-index: 50;
}

/* 모바일 메뉴 스타일 */
#mobile-menu {
    z-index: 40;
}

/* 모바일 메뉴가 열렸을 때 body 스타일 */
body[style*="position: fixed"] {
    overflow: hidden;
}

/* 애니메이션 요소가 있는 페이지의 오버플로우 방지 */
main {
    overflow-x: hidden;
    overflow-y: visible;
    width: 100%;
    position: relative;
}

/* 애니메이션 요소들의 초기 상태 설정 - 오버플로우 방지 */
.fade-up,
.fade-up-slow {
    opacity: 0;
}

.slide-left {
    opacity: 0;
}

.slide-right {
    opacity: 0;
}

.fade-down {
    opacity: 0;
}

.scale-in {
    opacity: 0;
}

.rotate-in {
    opacity: 0;
}

/* 애니메이션 요소들의 부모 컨테이너에 overflow hidden */
.fade-up, .fade-up-slow, .slide-left, .slide-right, 
.fade-down, .scale-in, .rotate-in, .blur-in {
    will-change: transform, opacity;
}

/* 애니메이션 중 스크롤바 방지를 위한 추가 설정 */
.has-scroll-smooth {
    overflow: hidden;
}

/* product 페이지 오버플로우 방지 */
.overflow-x-auto.fade-up,
.overflow-x-auto.fade-up-slow,
.overflow-x-auto.slide-left,
.overflow-x-auto.slide-right {
    overflow-y: hidden !important;
}

/* 애니메이션 진행 중 임시 오버플로우 방지 */
.fade-up:not(.gsap-initted),
.fade-up-slow:not(.gsap-initted),
.slide-left:not(.gsap-initted),
.slide-right:not(.gsap-initted) {
    opacity: 0;
    overflow: hidden;
}

/* 특정 섹션의 오버플로우 방지 */
#blog-posting-section,
#naver-place-section,
#naver-ads-section {
    overflow: hidden;
    position: relative;
}

/* 이미지 컨테이너 오버플로우 방지 */
#blog-image-container,
#place-image-container,
#ads-content-container {
    overflow: hidden;
}

/* 탭 컨테이너 오버플로우 방지 */
#blog-tab-container,
#ads-tab-container {
    max-width: 100%;
}

/* 모바일에서만 오버플로우 방지 */
@media (max-width: 1023px) {
    body {
        max-width: 100vw;
    }
    
    /* 전체 요소에 대한 오버플로우 방지 */
    /* * {
        max-width: 100vw;
        box-sizing: border-box;
    }
     */
    /* 모든 섹션에 오버플로우 방지 */
    section {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    /* 애니메이션 요소들의 초기 상태 */
    .fade-up, .fade-up-slow, .slide-left, .slide-right, 
    .fade-down, .scale-in, .rotate-in, .blur-in {
        overflow: hidden;
    }
}

/* 모바일에서 슬라이드 애니메이션 비활성화 */
@media (max-width: 767px) {
    .slide-left,
    .slide-right {
        transform: none !important;
    }
}



/* Typed.js 커서 스타일 */
.typed-cursor {
    color: #FBC503;
    font-weight: 100;
    animation: typed-cursor 1s infinite;
}

@keyframes typed-cursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 타이핑 텍스트 최소 높이 설정으로 레이아웃 시프트 방지 */
#typingTitle {
    min-height: 120px;
    display: flex;
    align-items: flex-start;
}

/* 모바일에서 loco-wrap 스타일 초기화 */
@media (max-width: 1023px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
    }
    
    .loco-wrap {
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        transform: none !important;
        width: 100% !important;
    }
    
    /* 모바일에서 locomotive-scroll 관련 스타일 제거 */
    .has-scroll-init,
    .has-scroll-smooth {
        overflow: visible !important;
    }
    
    /* 모바일에서 스크롤 컨테이너 초기화 */
    [data-scroll-container] {
        transform: none !important;
        position: relative !important;
    }
    
    /* 모바일에서 pin된 요소들 초기화 */
    .pin-spacer {
        height: auto !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    /* 모바일에서 fixed 요소들 position 변경 */
    .gsap-pin-active {
        position: relative !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
    }
}

/* 애니메이션 중 스크롤바 방지 */
.loco-wrap {
    overflow-x: hidden;
    overflow-y: visible;
    width: 100%;
}

/* 특정 섹션만 overflow hidden 적용 - 위로 올라가는 요소가 있는 섹션은 제외 */
section:not(.has-overlap-content) {
    overflow-x: hidden;
    position: relative;
}

/* 애니메이션 준비 상태에서 스크롤 방지 */
body:not(.animations-ready) {
    overflow-x: hidden;
}

body:not(.animations-ready) .loco-wrap {
    overflow-x: hidden !important;
}