/* 지페 · 페이지 효과 공통 (다운로드 · 문의 · 404): body.pgfx 에서만 적용 */
@keyframes fxrip{from{transform:scale(0);opacity:.5}to{transform:scale(1);opacity:0}}
@keyframes fxspin{to{transform:rotate(1turn)}}

/* 눌림: 살짝 눌렸다 돌아오고, 누른 자리에서 물결이 번져요 */
.pgfx .btn,.pgfx .store,.pgfx [data-press]{position:relative;overflow:hidden;isolation:isolate}
.pgfx .btn::after,.pgfx .store::after,.pgfx [data-press]::after{content:"";position:absolute;left:var(--rx,50%);top:var(--ry,50%);z-index:-1;width:240%;aspect-ratio:1;margin:-120% 0 0 -120%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55) 0,rgba(255,255,255,.28) 38%,transparent 62%);opacity:0;pointer-events:none;transform:scale(0)}
.pgfx .btn--ghost::after,.pgfx .btn--o::after,.pgfx .btn--light::after,.pgfx .btn--yellow::after,.pgfx .btn--y::after{background:radial-gradient(circle,rgba(30,77,216,.22) 0,rgba(30,77,216,.1) 38%,transparent 62%)}
.pgfx .btn.is-press::after,.pgfx .store.is-press::after,.pgfx [data-press].is-press::after{animation:fxrip .65s var(--out)}
.pgfx .btn:active,.pgfx .store:active{transform:scale(.97);transition-duration:.08s}
.pgfx [data-magnet]{translate:var(--mgx,0px) var(--mgy,0px);transition:translate .3s var(--out),transform .25s var(--out),background .2s,box-shadow .25s,color .2s}

/* 스포트라이트: 포인터 둘레만 살짝 밝아져요 */
.pgfx [data-spot]{position:relative;isolation:isolate}
.pgfx [data-spot]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(30,77,216,.11),transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none}
.pgfx [data-spot]:hover::before,.pgfx [data-spot]:focus-within::before{opacity:1}
.pgfx .card[data-tilt],.pgfx a.card[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .45s var(--out),box-shadow .45s,background .3s}
.pgfx .card[data-tilt]:hover{--ty:-4px;box-shadow:var(--sh2)}

@media (prefers-reduced-motion:reduce){
  .pgfx .btn::after,.pgfx .store::after,.pgfx [data-press]::after{display:none}
  .pgfx .btn:active,.pgfx .store:active{transform:none}
  .pgfx .card[data-tilt]{transform:none!important}
}