/* 투명한 두 프레임 스프라이트. 첫 프레임은 눈을 뜨고, 둘째는 눈을 감는다. */
.peek-dog{--dog-size:112px;position:absolute;width:var(--dog-size);height:calc(var(--dog-size) + 31px);pointer-events:none;z-index:3;isolation:isolate}
.peek-window{position:absolute;inset:31px 0 0;overflow:hidden}
.peek-character{position:absolute;inset:0;transform:translateY(115%);animation:dogPeek 3.4s cubic-bezier(.22,.7,.3,1) both;will-change:transform}
.peek-sprite{display:block;position:absolute;inset:0;background:url('/images/peek-dog-sprite.webp') no-repeat 0 50%;background-size:200% 100%;animation:dogBlink 3.4s step-end both}
.peek-caption{display:block;position:absolute;top:5px;left:50%;transform:translateX(-50%) translateY(5px);white-space:nowrap;background:var(--cream);color:var(--brown);border:1px solid #49342830;border-radius:20px;padding:5px 11px;font-size:10px;line-height:1.4;box-shadow:0 3px 12px #4934280c;opacity:0;animation:dogMessage 3.4s ease both}
.peek-love{position:absolute;right:10px;top:5px;font:20px var(--serif);color:var(--brown);opacity:0;animation:dogHeart 3.4s ease both}
.peek-welcome{right:5%;bottom:0;--dog-size:118px}
.peek-favorite{left:4px;bottom:0;--dog-size:96px}
.detail-grid{position:relative}.detail-grid>.peek-favorite{left:4px;right:auto;top:0;bottom:auto;--dog-size:90px}
.request-result{position:relative;margin-top:110px!important}
.peek-success{right:8px;top:-125px;--dog-size:100px}
.footer{position:relative;overflow:visible}.footer-wordmark{overflow:hidden}
.footer-peek{position:absolute;top:-132px;right:7%;height:132px;width:112px;z-index:2}
.footer-dog-button{padding:0;width:100%;height:100%;display:block;border-radius:12px 12px 0 0;position:relative}
.peek-footer{bottom:0;right:0;--dog-size:112px}
.peek-footer .peek-character{animation:none;transform:translateY(50%)}
.peek-footer .peek-sprite,.peek-footer .peek-caption,.peek-footer .peek-love{animation:none}
.peek-footer .peek-caption{opacity:1;transform:translateX(-50%);top:28px}
.peek-footer.is-greeting .peek-character{animation:dogFooterPeek 3.4s cubic-bezier(.22,.7,.3,1) both}
.peek-footer.is-greeting .peek-sprite{animation:dogBlink 3.4s step-end both}
.peek-footer.is-greeting .peek-caption{top:5px;animation:dogMessage 3.4s ease both}
.peek-footer.is-greeting .peek-love{animation:dogHeart 3.4s ease both}
.peek-dog.still .peek-character{animation:none;transform:translateY(12%)}
.peek-dog.still .peek-sprite{animation:none;background-position:0 50%}
.peek-dog.still .peek-caption{animation:none;opacity:1;transform:translateX(-50%)}
.peek-dog.still .peek-love{animation:none;opacity:0}
@keyframes dogPeek{0%,5%{transform:translateY(115%)}22%{transform:translateY(8%) rotate(-4deg)}32%,77%{transform:translateY(12%) rotate(0)}100%{transform:translateY(115%)}}
@keyframes dogFooterPeek{0%{transform:translateY(50%)}22%{transform:translateY(8%) rotate(-4deg)}32%,77%{transform:translateY(12%)}100%{transform:translateY(50%)}}
@keyframes dogBlink{0%,42%,49%,62%,69%,100%{background-position:0 50%}45%,65%{background-position:100% 50%}}
@keyframes dogMessage{0%,18%,93%,100%{opacity:0;transform:translateX(-50%) translateY(5px)}28%,78%{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes dogHeart{0%,28%,78%,100%{opacity:0;transform:translateY(8px) rotate(-8deg)}39%,62%{opacity:1;transform:translateY(-4px) rotate(8deg)}}
@media(max-width:580px){.peek-welcome{--dog-size:96px;right:4%;top:42%;bottom:auto}.peek-favorite{--dog-size:76px;left:0}.peek-caption{font-size:9px;padding:4px 8px}.peek-success{--dog-size:88px;top:-118px;right:0}.footer-peek{right:8%;width:95px;height:118px;top:-118px}.peek-footer{--dog-size:95px}.detail-grid>.peek-favorite{--dog-size:76px}.request-result{margin-top:105px!important}}
@media(prefers-reduced-motion:reduce){.peek-character,.peek-footer.is-greeting .peek-character{animation:none!important;transform:translateY(12%)}.peek-sprite,.peek-footer.is-greeting .peek-sprite{animation:none!important;background-position:0 50%}.peek-caption,.peek-footer.is-greeting .peek-caption{animation:none!important;opacity:1;transform:translateX(-50%)}.peek-love{display:none}}