@charset "UTF-8";
/**
**
**  Heisme Jump Scroll 1.4.x
**  플로팅 버튼 : 페이지 상단, 하단 이동, 페이지 자동 스크롤
**
**
@ History
    1.1.1   First Build
    1.3.x   OOP Convert
    1.4.x   Black, BlackWhite Theme 통합
*/

/* ======================================
Go Top Scroll Bottom : 상단/하단 이동버튼 */
#hJump {
    position: fixed;
    right: 20px;   /* 데스크톱 오른쪽 여백 */
    bottom: 80px;  /* 데스크톱 아래 여백 */
    z-index: 2001; /* 다른 UI 요소보다 위에 노출되도록 높은 z-index 지정 */
}

#hJump #btn-stop-scroll,
#hJump #btn-go-scroll,
#hJump #btn-go-top,
#hJump #btn-go-bottom {
    display: none;
    position: absolute;

    box-sizing: border-box;
    border-radius: 33%;
    width: 42px;
    height: 42px;
    cursor: pointer;

    /* color: rgba(255, 255, 255, 0.5); */
    color: rgba(0, 0, 30, 0.25);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.3));

    font-size: 19px;
    transition: background-image 0.2s ease, opacity 0.3s ease;
}

/* Mobile 에서 Touch 시 Hover Out 이 작동 안되는 것을 막기 위해 */
@media (hover:hover) and (pointer:fine) {
    #hJump #btn-stop-scroll:hover,
    #hJump #btn-go-scroll:hover {
        background-image: linear-gradient(to bottom, rgba(100, 100, 100, 0.4), rgba(255, 255, 255, 0.7));
    }
    #hJump #btn-go-top:hover,
    #hJump #btn-go-bottom:hover {
        background-image: linear-gradient(to bottom, rgba(100, 100, 100, 0.3), rgba(255, 255, 255, 0.6));
    }
}

#hJump #plate-stop-scroll {
    z-index: 10000;
    display: none;
    position: fixed; /* 화면 전체를 확실히 덮도록 4방향 고정 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;

    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 0%, rgba(255, 255, 255, 0) 2%, rgba(255, 255, 255, 0) 96%, rgba(0, 0, 0, 0.2) 100%);

    border-left-style: dashed;
    border-right-style: dashed;
    border-width: 10px;
    border-color: rgba(0, 0, 0, 0.1);
}

/* 데스크톱: 각 버튼 위치 지정 (부모 #hJump 내부 기준 수직 정렬) */
#hJump #btn-stop-scroll {
    left: -100px;
    bottom: 0;
}
#hJump #btn-go-top {
    right: 0;
    bottom: 88px; /* 최상단 버튼 (간격 44px 씩) */
}
#hJump #btn-go-scroll {
    right: 0;
    bottom: 44px; /* 중간 스크롤 버튼 */
}
#hJump #btn-go-bottom {
    right: 0;
    bottom: 0;    /* 최하단 버튼 */
}

#hJump .go-btn span {
    display: block;
    margin: 0px;
    text-align: center;
    line-height: 42px !important;
}

/* 모바일 반응형 처리 (가로 배치: Top-좌측 / Scroll-중간 / Bottom-우측) */
@media (max-width: 767px) {
    #hJump {
        left: 0;
        right: 0;
        bottom: 15px; /* 폴백 기본값 */
        bottom: calc(15px + constant(safe-area-inset-bottom)); /* 구형 iOS 대응 */
        bottom: calc(15px + env(safe-area-inset-bottom));      /* 표준 iOS 및 모바일 대응 */

        /* bottom: 15px; */
        width: 100%;
        height: 42px;
        pointer-events: none; /* 빈 영역 터치 통과 */
    }

    #hJump .go-btn {
        pointer-events: auto; /* 버튼 클릭 기능 복구 */
    }

    #hJump #plate-stop-scroll {
        pointer-events: auto; /* 스크롤 정지 플레이트 터치 가능 */
        border-left-style: dashed;
        border-right-style: dashed;
        border-width: 4px;
        border-color: rgba(125, 125, 130, 0.5);
    }

    /* 1. 좌측 배치: Top 버튼 */
    #hJump #btn-go-top {
        right: auto;
        left: 20px;
        bottom: 0;
        background-image: linear-gradient(-135deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.3));
    }

    /* 2. 중앙 배치: Scroll 버튼 및 Stop 버튼 */
    #hJump #btn-go-scroll,
    #hJump #btn-stop-scroll {
        right: auto;
        left: calc(50% - 21px); /* 화면 중앙 정렬 */
        bottom: 0;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.3));
    }

    /* 3. 우측 배치: Bottom 버튼 */
    #hJump #btn-go-bottom {
        left: auto;
        right: 20px;
        bottom: 0;
    }
}

/*==========
 Black 테마
==========*/
.theme_black #hJump #btn-stop-scroll,
.theme_black #hJump #btn-go-scroll,
.theme_black #hJump #btn-go-top,
.theme_black #hJump #btn-go-bottom {
    color: rgba(255, 255, 255, 0.5);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(50, 50, 70, 0.4));
}
/* Mobile 에서 Touch 시 Hover Out 이 작동 안되는 것을 막기 위해 */
@media (hover:hover) and (pointer:fine) {
    .theme_black #hJump #btn-stop-scroll:hover,
    .theme_black #hJump #btn-go-scroll:hover {
        background-image: linear-gradient(to bottom, rgba(100,100,100, 0.4), rgba(245, 245, 255, 0.7) );
    }
    .theme_black #hJump #btn-go-top:hover,
    .theme_black #hJump #btn-go-bottom:hover {
        background-image: linear-gradient(to bottom, rgba(100,100,100, 0.3), rgba(245, 245, 255, 0.6) );
    }
}

/*==============
 BlackWhite 테마
================*/
.theme_blackwhite #hJump #btn-stop-scroll,
.theme_blackwhite #hJump #btn-go-scroll,
.theme_blackwhite #hJump #btn-go-top,
.theme_blackwhite #hJump #btn-go-bottom {
    color: rgba(255, 255, 255, 0.5);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(50, 50, 70, 0.4));
}
/* Mobile 에서 Touch 시 Hover Out 이 작동 안되는 것을 막기 위해 */
@media (hover:hover) and (pointer:fine) {
    .theme_blackwhite #hJump #btn-stop-scroll:hover,
    .theme_blackwhite #hJump #btn-go-scroll:hover {
        background-image: linear-gradient(to bottom, rgba(100,100,100, 0.4), rgba(245, 245, 255, 0.7) );
    }
    .theme_blackwhite #hJump #btn-go-top:hover,
    .theme_blackwhite #hJump #btn-go-bottom:hover {
        background-image: linear-gradient(to bottom, rgba(100,100,100, 0.3), rgba(245, 245, 255, 0.6) );
    }
}