/* ================================================
   JPARTS - Floating Navigation
   공통 페이지 이동 메뉴
   ================================================ */

.jp-floating-nav {
    position: fixed;
    right: 20px;
    top: 55%;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 1000;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px;

    background: #28627a;
    border: 1px solid #194b60;
    border-radius: 14px;

    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* 공통 아이콘 버튼 */
.jp-floating-nav__button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 46px;
    height: 46px;
    padding: 0;

    background: #397d98;
    color: #ffffff;

    border: 1px solid #75abc1;
    border-radius: 9px;

    font-family: inherit;
    font-size: 24px;
    line-height: 1;

    text-align: center;
    text-decoration: none;
    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* 홈 버튼 - JPARTS 주황색 */
.jp-floating-nav__button:nth-child(3) {
    background: #f58a34;
    color: #172c3a;
    border-color: #f58a34;
}

/* 마우스 오버 */
.jp-floating-nav__button:hover {
    background: #ff9b45;
    color: #172c3a;
    border-color: #ff9b45;

    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

/* 버튼 클릭 */
.jp-floating-nav__button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 키보드 접근성 */
.jp-floating-nav__button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* ================================================
   Mobile
   ================================================ */

@media (max-width: 600px) {
    .jp-floating-nav {
        right: 8px;
        top: 55%;
        bottom: auto;

        gap: 4px;
        padding: 6px;

        border-radius: 10px;
    }

    .jp-floating-nav__button {
        width: 38px;
        height: 40px;

        font-size: 20px;
        border-radius: 7px;
    }
}

/* 좁은 모바일 화면 */
@media (max-width: 320px) {
    .jp-floating-nav {
        right: 4px;
        gap: 3px;
        padding: 4px;
    }

    .jp-floating-nav__button {
        width: 34px;
        height: 36px;
        font-size: 18px;
    }
}

/* 애니메이션 최소화 설정 */
@media (prefers-reduced-motion: reduce) {
    .jp-floating-nav__button {
        transition: none;
    }
}