/* ===== 페이지 이동 로딩 =====
   토스처럼 '기다림이 느껴질 때만' 나온다 — 빠르게 끝나는 이동에는 아예 뜨지 않아
   화면이 깜빡이지 않는다(표시 임계값은 loading.js 의 DELAY).
   구성: 화면 맨 위 얇은 진행바 + 가운데 카드(아이콘이 바뀌며 도는 인디케이터). */

/* 진행바 — 콘텐츠를 가리지 않게 화면 최상단에만 얹는다 */
#ptl-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:9998;
  background:linear-gradient(90deg,var(--pri,#e0728f),#ffb3c9);
  border-radius:0 3px 3px 0;box-shadow:0 0 8px rgba(224,114,143,.55);
  opacity:0;transition:width .18s ease-out,opacity .25s}
#ptl-bar.on{opacity:1}

/* 가운데 인디케이터 — 딤은 아주 옅게. 뒤 화면이 비쳐 보여야 '멈춘 느낌'이 덜하다 */
#ptl-veil{position:fixed;inset:0;z-index:9997;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s}
#ptl-veil.on{opacity:1;visibility:visible}

#ptl-card{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:22px 26px;border-radius:22px;background:#fff;
  box-shadow:0 12px 34px rgba(96,60,72,.16),0 2px 8px rgba(96,60,72,.06);
  transform:translateY(6px) scale(.96);transition:transform .26s cubic-bezier(.2,.9,.3,1.1)}
#ptl-veil.on #ptl-card{transform:translateY(0) scale(1)}

/* 아이콘 자리 — SVG 를 겹쳐 두고 현재 것만 보인다(폰트 CDN 이 늦어도 확실히 보이도록 인라인 SVG) */
#ptl-ico{position:relative;width:46px;height:46px}
#ptl-ico svg{position:absolute;inset:0;width:46px;height:46px;fill:var(--pri,#e0728f);
  opacity:0;transform:scale(.6) rotate(-14deg);
  transition:opacity .34s,transform .34s cubic-bezier(.2,.9,.3,1.2)}
#ptl-ico svg.on{opacity:1;transform:scale(1) rotate(0)}

/* 아이콘을 감싸고 도는 링 — 진행이 멈춘 게 아니라는 신호 */
#ptl-ring{position:absolute;inset:-9px;border-radius:50%;
  border:2.5px solid var(--pri-light,#ffe3ec);border-top-color:var(--pri,#e0728f);
  animation:ptlSpin .9s linear infinite}

#ptl-tx{font-size:13px;font-weight:700;color:#8b8f96;letter-spacing:-.2px}

@keyframes ptlSpin{to{transform:rotate(360deg)}}

/* 움직임을 줄여 달라고 설정한 기기 — 도는 링과 튀는 전환을 멈추고 아이콘만 바꾼다 */
@media (prefers-reduced-motion:reduce){
  #ptl-ring{animation:none;border-top-color:var(--pri-light,#ffe3ec)}
  #ptl-card{transition:none;transform:none}
  #ptl-ico svg{transition:opacity .2s;transform:none}
  #ptl-ico svg.on{transform:none}
}