/* 지페 · 보조 동작 키트 (pb2-kit.js 와 짝) — 이용방법 · 공지 · 정책 목록 · 지페 페이지 공용.
   원칙: transform · opacity 만 움직이고, 클래스는 JS가 붙일 때만 적용돼요 (JS 없음 · 동작 줄이기 = 원래 모습). */

/* ── 보일 때 나타나기 ─────────────────────────── */
.js .px-pre{opacity:0;transform:translate3d(0,24px,0)}
.js .px-pre.px-l{transform:translate3d(-14px,0,0)}
.js .px-pre.px-s{transform:translate3d(0,18px,0) scale(.965)}
.js .px-pre.px-in{opacity:1;transform:none;transition:opacity .7s var(--out) calc(var(--i,0)*70ms),transform .85s var(--out) calc(var(--i,0)*70ms)}
@keyframes px-pop{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.px-pop{animation:px-pop .5s var(--out) both;animation-delay:calc(var(--i,0)*45ms)}

/* ── 단계 목록 .flow.is-draw : 번호 사이 선이 이어져요 ── */
.flow.is-draw{--cs:clamp(40px,3.6vw,56px);--pd:clamp(22px,2.4vw,40px)}
.flow.is-draw li::before{background:#fff;color:var(--ink2);box-shadow:inset 0 0 0 2px #d5dae1;transition:background .35s var(--out),color .35s,box-shadow .35s,transform .55s var(--spring)}
.flow.is-draw li.is-on::before{background:var(--blue);color:#fff;box-shadow:none}
.flow.is-draw li.is-cur::before{transform:scale(1.1);box-shadow:0 0 0 6px rgba(30,77,216,.16)}
.flow.is-draw li.is-cur:not(:last-child)::before{animation:px-halo 2.4s ease-out 2}
.flow.is-draw.is-done li:last-child::before{animation:px-halo 2.4s ease-out 2}
@keyframes px-halo{0%{box-shadow:0 0 0 0 rgba(30,77,216,.32)}70%,100%{box-shadow:0 0 0 12px rgba(30,77,216,0)}}
.flow.is-draw li>div{position:static}
.flow.is-draw li:not(:last-child)::after,.flow.is-draw li:not(:last-child)>div::before{content:"";position:absolute;z-index:1;left:calc(var(--cs)/2 - 1.5px);top:calc(var(--pd) + var(--cs));bottom:calc(-1px - var(--pd));width:3px;border-radius:2px;pointer-events:none}
.flow.is-draw li:not(:last-child)::after{background:#dde1e7}
.flow.is-draw li:not(:last-child)>div::before{z-index:2;background:var(--blue);transform-origin:50% 0;transform:scaleY(var(--s,0))}
.flow.is-draw li.is-cur b{color:var(--blue)}
.flow.is-draw li b{transition:color .35s}

/* ── 포인터 스포트라이트 .px-spot ─────────────── */
.px-spot{position:relative;isolation:isolate}
.px-spot::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:radial-gradient(circle 240px at var(--mx,50%) var(--my,30%),rgba(30,77,216,.09),rgba(30,77,216,0) 70%);opacity:0;transition:opacity .35s;pointer-events:none}
.px-spot:hover::after,.px-spot:focus-within::after{opacity:1}
@media (hover:hover) and (pointer:fine){
  .px-spot{transition:transform .5s var(--out),box-shadow .45s}
  .px-spot:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);box-shadow:var(--sh2)}
}
@media (prefers-reduced-motion:reduce){
  .px-spot:hover{transform:none}
  .flow.is-draw li.is-cur::before{transform:none;animation:none!important}
}