/* ===== 돌아다니는 놀먹이 — 몸 조각(SVG)의 자세는 js/mascot.js가 매 프레임 계산 ===== */
.mascot {
  position: fixed; left: 0; bottom: calc(2px + env(safe-area-inset-bottom)); z-index: 35;
  width: 108px; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; will-change: transform;
  transition: opacity .3s;
}
.mascot.shy { opacity: 0; pointer-events: none; }
.mascot-lean { transform: rotate(calc(var(--lean, 0) * 1deg)); transform-origin: 50% 96%; transition: transform .45s var(--ease); }

.nm { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 8px rgba(43, 66, 112, .16)); }
.nm-line { stroke: #5B8ED3; stroke-width: 1.6; stroke-opacity: .5; }
.nm-stroke, .nm-eye-happy, .nm-eye-shut, .nm-mouth-grin {
  fill: none; stroke: #2E4677; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.nm-pad-cross { fill: none; stroke: #FFF7E6; stroke-width: 3.4; stroke-linecap: round; }
.nm-shadow { fill: rgba(43, 66, 112, .15); }

/* 얼굴 모양 (data-face): 눈 · 입 모양만 바꾸고, 움직임은 JS가 */
.nm-eye-happy, .nm-eye-shut, .nm-mouth-grin, .nm-mouth-o { display: none; }
[data-face="happy"] .nm-eye-open, [data-face="sleep"] .nm-eye-open,
[data-face="wink"] .nm-eye-r .nm-eye-open { display: none; }
[data-face="happy"] .nm-eye-happy, [data-face="wink"] .nm-eye-r .nm-eye-happy,
[data-face="sleep"] .nm-eye-shut { display: inline; }
[data-face="sleep"] .nm-mouth-open, [data-face="focus"] .nm-mouth-open, [data-face="o"] .nm-mouth-open { display: none; }
[data-face="sleep"] .nm-mouth-grin, [data-face="focus"] .nm-mouth-grin, [data-face="o"] .nm-mouth-o { display: inline; }

/* 졸 때 zzZ */
.mascot-zzz { position: absolute; right: 8%; top: 4%; pointer-events: none; }
.mascot-zzz i { position: absolute; font-style: normal; font-weight: 800; font-size: 13px; color: var(--brand-600); opacity: 0; }
[data-act="sleep"] .mascot-zzz i { animation: nmZ 2.4s ease-in infinite; }
[data-act="sleep"] .mascot-zzz i:nth-child(2) { animation-delay: .8s; font-size: 17px; }
[data-act="sleep"] .mascot-zzz i:nth-child(3) { animation-delay: 1.6s; font-size: 21px; }
@keyframes nmZ { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(16px, -40px) scale(1); opacity: 0; } }

/* 말풍선 */
.mascot-bubble {
  position: absolute; left: 50%; bottom: calc(100% - 4px);
  transform: translateX(calc(-50% + var(--shift, 0px))) translateY(6px) scale(.92); transform-origin: bottom center;
  opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 8px 14px; border-radius: 16px; background: #fff; color: var(--brand-900);
  font-size: 14px; font-weight: 700; box-shadow: var(--shadow);
  transition: opacity .2s, transform .3s var(--ease);
}
.mascot-bubble::after {
  content: ""; position: absolute; top: 100%; left: calc(50% - var(--shift, 0px)); transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #fff;
}
.mascot.talking .mascot-bubble { opacity: 1; transform: translateX(calc(-50% + var(--shift, 0px))) translateY(0) scale(1); }

@media (max-width: 560px) {
  .mascot { width: 78px; }
}
@media (max-width: 400px) {
  .mascot { width: 68px; }
}
/* 화면이 낮을 때(카톡 창처럼 작게 띄우거나 가로로 눕혔을 때)는
   놀먹이를 띄우지 말고 글 밑 빈 자리(페이지 바닥)에 세워서 글씨를 가리지 않게 한다. */
@media (max-height: 620px) {
  body { position: relative; }
  .mascot { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot, .mascot * { transition: none !important; }
  .mascot-zzz i { animation: none !important; }
}