/* 클릭·호버 모션 — 부드럽게 (2026-09-22 "커서 클릭할 때 모션 더 부드럽게")
   곡선은 빠르게 시작해 천천히 멈추는 easeOutQuint 계열, 길이는 180~420ms */
:root{--ease:cubic-bezier(.22,1,.36,1);--ease-pop:cubic-bezier(.34,1.56,.64,1)}

.chip,.tag,.btn,.more,.draft,.file label,.wz-nav button,.mini,.guess button,.rename .btn{
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background-color .28s var(--ease),border-color .28s var(--ease),color .2s var(--ease),opacity .2s;
  -webkit-tap-highlight-color:transparent;will-change:transform}
input[type=text],textarea,select{transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}

/* 마우스 올림: 살짝 떠오름 (마우스가 있는 기기에서만) */
@media (hover:hover){
  .chip:hover,.tag:hover,.more:hover,.file label:hover,.wz-nav .prev:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(16,24,40,.08)}
  .btn:hover,.wz-nav .next:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(43,107,232,.28)}
  .draft:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(16,24,40,.12)}
}
/* 누름: 살짝 눌렸다 돌아옴 */
.chip:active,.tag:active,.btn:active,.more:active,.draft:active,.file label:active,.wz-nav button:not(:disabled):active{transform:scale(.97);transition-duration:.12s}

/* 선택되는 순간 한 번 톡 */
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
.chip.on,.tag.on,.draft.on{animation:pop .42s var(--ease-pop)}

/* 누른 자리에서 번지는 물결 (motion.js 가 span.ripple 을 넣는다) */
.btn,.wz-nav button,.chip{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.18;transform:scale(0);animation:ripple .6s var(--ease) forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* 단계 넘어갈 때 스르륵 (앞으로 = 오른쪽에서, 뒤로 = 왼쪽에서) */
@keyframes stepInFwd{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes stepInBack{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.step-in-fwd{animation:stepInFwd .42s var(--ease)}
.step-in-back{animation:stepInBack .42s var(--ease)}
.wz-progress .bar i{transition:width .5s var(--ease)!important}

/* 결과·안내 박스가 나타날 때 */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.result.ok,.result.err,.result.info,.guess:not(.hidden),.rename:not(.hidden){animation:fadeUp .35s var(--ease)}
.modal.show .box{animation:fadeUp .3s var(--ease)}

/* 움직임 줄이기 설정한 기기에선 끈다 */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}