/*
 * 상품권 구매 플로팅 버튼 v1
 * 링크: https://www.pin-toss.com/
 */

.gpurchase-float{
    position:fixed;
    right:24px;
    bottom:64px;
    z-index:185;
    display:flex;
    width:158px;
    min-height:58px;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:9px 16px 9px 13px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:999px;
    background:
        linear-gradient(135deg,#ff5c7c 0%,#ff3f68 52%,#f72d5d 100%);
    box-shadow:
        0 12px 28px rgba(244,50,95,.28),
        0 3px 9px rgba(23,39,57,.12),
        inset 0 1px 0 rgba(255,255,255,.32);
    color:#fff!important;
    font-family:
        Pretendard,
        -apple-system,
        BlinkMacSystemFont,
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;
    text-decoration:none!important;
    transform:translate3d(0,0,0);
    opacity:1;
    visibility:visible;
    -webkit-tap-highlight-color:transparent;
    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.gpurchase-float::before{
    content:"";
    position:absolute;
    inset:1px;
    z-index:-1;
    border-radius:inherit;
    background:
        radial-gradient(circle at 27% 18%,rgba(255,255,255,.24),transparent 34%);
    pointer-events:none;
}

.gpurchase-float:hover{
    color:#fff!important;
    transform:translateY(-2px);
    box-shadow:
        0 15px 32px rgba(244,50,95,.34),
        0 4px 10px rgba(23,39,57,.13),
        inset 0 1px 0 rgba(255,255,255,.34);
}

.gpurchase-float:active{
    transform:translateY(0) scale(.97);
}

.gpurchase-float:focus-visible{
    outline:3px solid rgba(22,141,204,.28);
    outline-offset:4px;
}

.gpurchase-float__icon{
    display:grid;
    width:30px;
    height:30px;
    flex:0 0 30px;
    place-items:center;
}

.gpurchase-float__icon svg{
    display:block;
    width:27px;
    height:27px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.gpurchase-float__text{
    color:#fff;
    font-size:12px;
    font-weight:850;
    line-height:1.25;
    letter-spacing:-.035em;
    text-align:left;
    word-break:keep-all;
}

.gpurchase-float__spark{
    position:absolute;
    width:3px;
    height:10px;
    border-radius:99px;
    background:#ff3f68;
    opacity:.9;
    pointer-events:none;
}

.gpurchase-float__spark--1{
    top:-9px;
    right:15px;
    transform:rotate(24deg);
}

.gpurchase-float__spark--2{
    top:-3px;
    right:5px;
    height:8px;
    transform:rotate(63deg);
}

/*
 * 핵심 요구사항:
 * 교환하기 버튼으로 메인 교환신청 팝업이 열리면 플로팅 버튼 숨김.
 * 팝업 닫기 시 body 클래스가 제거되므로 자동으로 다시 표시됩니다.
 */
body.gexchange-modal-open .gpurchase-float,
body.gift-submodal-open .gpurchase-float{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(12px) scale(.94)!important;
}

/* 기존 위로가기 버튼(#top_btn)보다 위에 배치 */
@media(max-width:720px){
    .gpurchase-float{
        right:14px;
        bottom:calc(58px + env(safe-area-inset-bottom));
        width:76px;
        min-height:76px;
        flex-direction:column;
        gap:2px;
        padding:10px 7px 9px;
        border-radius:50%;
        box-shadow:
            0 12px 27px rgba(244,50,95,.27),
            0 3px 9px rgba(23,39,57,.12),
            inset 0 1px 0 rgba(255,255,255,.32);
    }

    .gpurchase-float__icon{
        width:24px;
        height:24px;
        flex-basis:24px;
    }

    .gpurchase-float__icon svg{
        width:22px;
        height:22px;
    }

    .gpurchase-float__text{
        font-size:9.8px;
        line-height:1.14;
        text-align:center;
    }

    .gpurchase-float__spark--1{
        top:-7px;
        right:10px;
    }

    .gpurchase-float__spark--2{
        top:0;
        right:0;
    }
}

@media(max-width:390px){
    .gpurchase-float{
        right:11px;
        bottom:calc(54px + env(safe-area-inset-bottom));
        width:72px;
        min-height:72px;
        padding:8px 4px 7px;
    }

    .gpurchase-float__text{
        font-size:9.3px;
    }
}

/* 인쇄 및 매우 작은 화면에서는 표시하지 않음 */
@media print{
    .gpurchase-float{display:none!important}
}