/* 에디터 프리뷰 스타일 */
.givia-scroll-nav-editor-preview {
    background-color: var(--gsn-bg, transparent);
    padding: 0; /* 패딩 제거 */
    border: none !important;
    border-radius: 4px;
    min-height: var(--gsn-height, 60px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 에디터 프리뷰 내 도트는 기본적으로 숨김 (호버 시에만 표시) */
.givia-scroll-nav-editor-preview .givia-scroll-nav-dot {
    opacity: 0 !important;
    transform: scale(0.5) !important;
}

.givia-scroll-nav-editor-preview .givia-scroll-nav-item:hover .givia-scroll-nav-dot {
    font-size: 13px !important;
}

/* 스와이프 스크롤링 공통 스타일 (활성화 시) */
.givia-scroll-nav-wrapper.has-swipe-active {
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    display: block !important; /* 가로 스크롤을 위해 블록화 */
}
.givia-scroll-nav-wrapper.has-swipe-active::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.has-swipe-active .givia-scroll-nav-list {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 100%;
    padding: 0 20px;
    height: 100%;
    align-items: center;
}

/* 기기별 스와이프 활성화 제어 */
@media (min-width: 1025px) {
    .givia-scroll-nav-wrapper.has-swipe-desktop {
        white-space: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        display: block !important;
    }
    .has-swipe-desktop .givia-scroll-nav-list {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
    }
}
@media (max-width: 1024px) and (min-width: 768px) {
    .givia-scroll-nav-wrapper.has-swipe-tablet {
        white-space: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        display: block !important;
    }
    .has-swipe-tablet .givia-scroll-nav-list {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
    }
}
@media (max-width: 767px) {
    .givia-scroll-nav-wrapper.has-swipe-mobile {
        white-space: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        display: block !important;
    }
    .has-swipe-mobile .givia-scroll-nav-list {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
    }
}

.givia-scroll-nav-editor-preview .givia-scroll-nav-item:hover .givia-scroll-nav-dot {
    opacity: 1 !important;
    transform: scale(1.2) !important;
}

/* 텍스트 색상 강제 적용 */
.givia-scroll-nav-editor-preview .givia-scroll-nav-link {
    color: var(--gsn-text-color, #222) !important;
}

.givia-scroll-nav-preview-box {
    text-align: center;
    color: #888;
}

.givia-scroll-nav-preview-box .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    color: #ccc;
}

/* 프론트엔드 스타일 */
.givia-scroll-nav-wrapper {
    position: var(--gsn-pos, fixed);
    top: var(--gsn-top, 50%);
    transform: var(--gsn-transform, translateY(-50%));
    z-index: var(--gsn-zindex, 9999);
    pointer-events: none;
    background-color: var(--gsn-bg, transparent);
    height: var(--gsn-height, 60px);
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    border: none !important;
    border-bottom: var(--gsn-border-width, 1px) solid var(--gsn-border-color, #dddddd) !important;
    box-shadow: var(--gsn-shadow, none) !important;
    background-color: var(--gsn-bg, #ffffff) !important;
}

/* 에디터 프리뷰용 스타일 강제 */
.givia-scroll-nav-editor-preview {
    border: none !important;
    border-bottom: var(--gsn-border-width, 1px) solid var(--gsn-border-color, #dddddd) !important;
    box-shadow: var(--gsn-shadow, none) !important;
    background-color: var(--gsn-bg, #ffffff) !important;
    box-sizing: border-box !important;
}
}

/* 탑 오프셋 설정 시 transform 해제 */
.givia-scroll-nav-wrapper[style*="--gsn-top"] {
    transform: none;
}

.givia-scroll-nav-list {
    list-style: none;
    margin: 0 auto;
    padding: var(--gsn-padding, 0); /* 네이티브 패딩 대응 */
    display: flex;
    flex-direction: row;
    gap: var(--gsn-gap, 15px);
    pointer-events: auto;
    align-items: center;
}

.givia-scroll-nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.givia-scroll-nav-link {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    gap: 8px;
    transition: all 0.3s ease;
    color: var(--gsn-text-color, #222);
    padding: 10px 0;
    font-size: var(--gsn-font-size, inherit); /* 네이티브 폰트 크기 대응 */
}

/* 도트 스타일 (type-dots) */
.type-dots .givia-scroll-nav-dot {
    display: block;
    border-radius: 50%;
    background-color: var(--gsn-dot-color, #999);
    width: var(--gsn-dot-size, 10px);
    height: var(--gsn-dot-size, 10px);
    opacity: 0; /* 평상시에는 완전히 숨김 */
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.type-dots .givia-scroll-nav-item.is-active .givia-scroll-nav-dot,
.type-dots .givia-scroll-nav-item:hover .givia-scroll-nav-dot {
    background-color: var(--gsn-active-color, #3740e8);
    opacity: 1; /* 활성/호버 시에만 표시 */
    transform: scale(1.2);
}

/* 타입: 없음 (텍스트 전용) */
.type-none .givia-scroll-nav-dot {
    display: none;
}

/* 박스 배경 스타일 (type-box) */
.type-box .givia-scroll-nav-link {
    padding: 6px 14px;
    border-radius: 6px;
    background: var(--gsn-cta-bg-normal, transparent);
    color: var(--gsn-cta-text-normal, inherit);
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
}
.type-box .givia-scroll-nav-item.is-active .givia-scroll-nav-link {
    background: var(--gsn-cta-bg-active, #3740e8) !important;
    color: var(--gsn-cta-text-active, #ffffff) !important;
}
.type-box .givia-scroll-nav-link:hover {
    background: var(--gsn-cta-bg-hover, #222222) !important;
    color: var(--gsn-cta-text-hover, #ffffff) !important;
}
.type-box .givia-scroll-nav-dot {
    display: none;
}

/* CTA 강조 스타일 (is-cta) */
.wp-block-givia-scroll-navigation .givia-scroll-nav-item.is-cta .givia-scroll-nav-link,
.wp-block-givia-scroll-navigation .givia-scroll-nav-item.is-cta .givia-scroll-nav-label {
    color: var(--gsn-cta-text-normal, #ffffff) !important;
}
.givia-scroll-nav-item.is-cta .givia-scroll-nav-link {
    padding: 6px 14px;
    border-radius: 6px;
    background: var(--gsn-cta-bg-normal, #3740e8);
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
}
.wp-block-givia-scroll-navigation .givia-scroll-nav-item.is-cta.is-active .givia-scroll-nav-link {
    background: var(--gsn-cta-bg-active, #3740e8) !important;
}
.wp-block-givia-scroll-navigation .givia-scroll-nav-item.is-cta.is-active .givia-scroll-nav-label {
    color: var(--gsn-cta-text-active, #ffffff) !important;
}
.wp-block-givia-scroll-navigation .givia-scroll-nav-item.is-cta .givia-scroll-nav-link:hover {
    background: var(--gsn-cta-bg-hover, #222222) !important;
}
.wp-block-givia-scroll-navigation .givia-scroll-nav-item.is-cta .givia-scroll-nav-link:hover .givia-scroll-nav-label {
    color: var(--gsn-cta-text-hover, #ffffff) !important;
}
.givia-scroll-nav-item.is-cta .givia-scroll-nav-dot {
    display: none;
}

/* 밑줄보더 스타일 (type-border) */
.type-border .givia-scroll-nav-link {
    border-bottom: 2px solid transparent;
}

.type-border .givia-scroll-nav-item.is-active .givia-scroll-nav-link,
.type-border .givia-scroll-nav-item:hover .givia-scroll-nav-link {
    border-bottom-color: var(--gsn-text-active, #3740e8);
}

.givia-scroll-nav-label {
    white-space: nowrap;
    color: inherit;
    font-weight: 500;
}

/* 에디터 프리뷰 텍스트 색상 및 호버 상태 강제 적용 */
.givia-scroll-nav-editor-preview .givia-scroll-nav-link,
.givia-scroll-nav-editor-preview .givia-scroll-nav-label {
    color: var(--gsn-text-color, #222) !important;
}

.givia-scroll-nav-editor-preview .givia-scroll-nav-item:hover .givia-scroll-nav-link,
.givia-scroll-nav-editor-preview .givia-scroll-nav-item:hover .givia-scroll-nav-label {
    color: var(--gsn-text-hover, #3740e8) !important;
}

/* 텍스트 색상 상태 */
.givia-scroll-nav-link {
    color: var(--gsn-text-color, #222) !important;
}

.givia-scroll-nav-item:hover .givia-scroll-nav-link {
    color: var(--gsn-text-hover, #3740e8) !important;
}

.givia-scroll-nav-item.is-active .givia-scroll-nav-link {
    color: var(--gsn-text-active, #3740e8) !important;
}

/* 반응형 변수 오버라이드 */
@media (max-width: 1024px) {
    .givia-scroll-nav-wrapper {
        --gsn-dot-color: var(--gsn-dot-color-tablet, var(--gsn-dot-color));
        --gsn-active-color: var(--gsn-active-color-tablet, var(--gsn-active-color));
        --gsn-dot-size: var(--gsn-dot-size-tablet, var(--gsn-dot-size));
        --gsn-gap: var(--gsn-gap-tablet, var(--gsn-gap));
        --gsn-pos: var(--gsn-pos-tablet, var(--gsn-pos));
        --gsn-height: var(--gsn-height-tablet, var(--gsn-height));
        --gsn-top: var(--gsn-top-tablet, var(--gsn-top));
        --gsn-margin: var(--gsn-margin-tablet, var(--gsn-margin));
    }
    .givia-scroll-nav-wrapper.hide-tablet { display: none !important; }
}

@media (max-width: 767px) {
    .givia-scroll-nav-wrapper {
        --gsn-dot-color: var(--gsn-dot-color-mobile, var(--gsn-dot-color));
        --gsn-active-color: var(--gsn-active-color-mobile, var(--gsn-active-color));
        --gsn-dot-size: var(--gsn-dot-size-mobile, var(--gsn-dot-size));
        --gsn-gap: var(--gsn-gap-mobile, var(--gsn-gap));
        --gsn-pos: var(--gsn-pos-mobile, var(--gsn-pos));
        --gsn-height: var(--gsn-height-mobile, var(--gsn-height));
        --gsn-top: var(--gsn-top-mobile, var(--gsn-top));
        --gsn-margin: var(--gsn-margin-mobile, var(--gsn-margin));
    }
    .givia-scroll-nav-wrapper.hide-mobile { display: none !important; }
}

@media (min-width: 1025px) {
    .givia-scroll-nav-wrapper.hide-desktop { display: none !important; }
}