/* 앱 컨테이너 밖의 고정 레이어: 화면 전환과 스크롤의 영향을 받지 않습니다. */
.floating-pet{position:fixed;right:20px;bottom:20px;width:210px;z-index:80;isolation:isolate;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 8px 15px #73588814);color:#65507e;contain:layout style;pointer-events:none;}
.pet-touch,.pet-drag-handle,.pet-home{pointer-events:auto;}
.pet-bubble{position:relative;box-sizing:border-box;height:72px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 15px;border:1px solid #e4d7f5;border-radius:19px 19px 6px 19px;background:#fffffff7;font-size:13px;line-height:1.7;word-break:keep-all;pointer-events:none;}
.pet-bubble::after{content:'';position:absolute;bottom:-7px;right:44px;width:12px;height:12px;transform:rotate(45deg);background:#fff;border-right:1px solid #e4d7f5;border-bottom:1px solid #e4d7f5;}
.pet-stage{height:169px;display:grid;place-items:center;margin-top:5px;}
.pet-touch{position:relative;display:block;width:168px;height:168px;padding:0;border:0;background:#f4efff;border-radius:50% 50% 44% 44%;cursor:grab;touch-action:none;overflow:visible;-webkit-tap-highlight-color:transparent;}
.pet-touch:hover:not(:disabled){transform:none;}
.pet-touch:focus-visible,.pet-drag-handle:focus-visible,.pet-home:focus-visible{outline:3px solid #9e73df;outline-offset:3px;}
.pet-sprite{display:block;width:100%;height:100%;transition:none;border-radius:inherit;mask-image:radial-gradient(ellipse 72% 74% at 50% 52%,#000 55%,transparent 98%);pointer-events:none;}
.pet-toolbar{height:31px;display:flex;align-items:center;justify-content:center;gap:5px;margin:0 8px;padding:2px 4px;border:1px solid #e8dcf5;border-radius:20px;background:#fffffff2;}
.pet-drag-handle{display:flex;gap:3px;align-items:center;border:0;border-radius:14px;background:none;padding:4px 6px;font-size:12px;font-weight:700;color:#796193;cursor:grab;touch-action:none;white-space:nowrap;}
.pet-drag-handle>span:first-child{font-size:17px;line-height:1;}
.pet-mood{font-size:11px;white-space:nowrap;flex:1;text-align:center;}
.pet-home{width:26px;height:26px;display:grid;place-items:center;background:none;border:0;color:#9c83b7;border-radius:50%;padding:4px;}
.pet-home svg{width:15px;height:15px;}
.pet-help{font-size:11px;text-align:center;margin:5px 0 0;color:#887197;text-shadow:0 1px 4px white;background:#faf9fcde;border-radius:10px;line-height:1.6;}
.pet-effects{position:absolute;inset:0;pointer-events:none;}
.pet-effects span{position:absolute;left:calc(26% + var(--heart-index)*24%);top:26%;font-size:26px;font-weight:700;color:#d571a6;opacity:0;animation:pet-heart 1.4s ease-out both;animation-delay:calc(var(--heart-index)*.13s);}
.floating-pet[data-mood="incorrect"] .pet-bubble{border-color:#e8d9ca;background:#fffaf5;}
.floating-pet[data-mood="incorrect"] .pet-bubble::after{background:#fffaf5;border-color:#e8d9ca;}
.floating-pet[data-mood="incorrect"] .pet-mood{color:#97754f;}
.floating-pet[data-mood="petting"] .pet-bubble{border-color:#f0d6e4;}
.floating-pet[data-mood="petting"] .pet-mood{color:#b86a92;}
.floating-pet[data-mood="dragging"] .pet-touch{cursor:grabbing;transform:rotate(-2deg) scale(1.04);}
.floating-pet[data-mood="dragging"] .pet-drag-handle{cursor:grabbing;}
.floating-pet[data-mood="dragging"]{filter:drop-shadow(0 12px 20px #73588832);}
.pet-guide{background:#f4efff;border-color:#e9ddfb;margin-top:0;}
.pet-guide h2{font-size:18px;margin:0 0 10px;color:#684b93;}
.pet-guide p{font-size:13px;line-height:1.9;color:#8a739f;margin:0;word-break:keep-all;}
.pet-guide .pet-action{margin-top:12px;background:white;}
.pet-guide .pet-reset{display:block;margin:12px auto 0;border:0;background:none;font-size:12px;color:#8a6ba9;text-decoration:underline;text-underline-offset:3px;}
@keyframes pet-heart{0%{opacity:0;transform:translateY(10px) scale(.7)}20%{opacity:1}100%{opacity:0;transform:translateY(-55px) scale(1.2)}}
@media(max-width:780px){.floating-pet{width:168px}.pet-bubble{height:68px;padding:8px 11px;font-size:12px;line-height:1.65;border-radius:16px 16px 5px 16px}.pet-stage{height:122px}.pet-touch{width:122px;height:122px}.pet-toolbar{margin:0 1px;gap:2px;height:30px}.pet-mood{font-size:10px}.pet-drag-handle{font-size:11px;padding:3px}.pet-help{font-size:10px;margin-top:3px}.pet-guide{grid-row:span 2}.pet-guide h2{font-size:16px}.pet-guide p{font-size:12px}.footer{padding-bottom:235px;}}
@media(max-height:480px){.floating-pet{width:158px}.pet-stage{height:100px}.pet-touch{width:100px;height:100px}.pet-bubble{height:60px;font-size:12px;padding:7px 10px}.pet-help{display:none}.pet-toolbar{margin:0}}
@media(prefers-reduced-motion:reduce){.floating-pet *{animation:none!important;transition:none!important}.pet-effects span{display:none}.floating-pet[data-mood="dragging"] .pet-touch{transform:none}}

.pet-toggle{position:absolute;right:6px;top:6px;z-index:3;width:27px;height:27px;display:grid;place-items:center;padding:0;border:1px solid #e4d7f5;border-radius:50%;background:#ffffffed;color:#7656a0;font-size:18px;line-height:1;cursor:pointer;pointer-events:auto}
.floating-pet[data-collapsed="true"]{width:78px}
.floating-pet[data-collapsed="true"] .pet-bubble,.floating-pet[data-collapsed="true"] .pet-toolbar,.floating-pet[data-collapsed="true"] .pet-help{display:none}
.floating-pet[data-collapsed="true"] .pet-stage{height:78px;margin:0}
.floating-pet[data-collapsed="true"] .pet-touch{width:74px;height:74px}
.floating-pet[data-collapsed="true"] .pet-toggle{right:0;top:0}
@media(max-width:780px){.floating-pet[data-collapsed="true"]{width:64px}.floating-pet[data-collapsed="true"] .pet-stage{height:64px}.floating-pet[data-collapsed="true"] .pet-touch{width:60px;height:60px}.floating-pet[data-collapsed="true"] .pet-toggle{width:23px;height:23px;font-size:15px}}