/* 코드 몬스터 상태(shared/monster.js). 감싸개(.fig 또는 캐릭터 div)에 class: listening(아이 차례) · happy · talking · wave · point · hint.
   가만히 있을 때 애니메이션 0, 움직임은 전부 transform/opacity(저사양 대책). */
.mon { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }   /* relative: 앞에 둔 빛(.glow, absolute)이 몸 위로 칠해지지 않게 */
.mon .who, .mon .eyes, .mon .arm-l, .mon .arm-r, .mon .held { transform-box: view-box; }
.mon .who { transform-origin: 100px 180px; }
.mon .eyes { transform-origin: 100px 118px; transition: transform .15s; }
.mon .shut, .mon .mouth-o, .mon .mouth-open, .mon .sparks { opacity: 0; }
.mon .arm-l, .mon .arm-r { transition: transform .25s; }
/* 듣기: 눈 커지고 입 'o' */
.listening .mon .eyes { transform: scale(1.14); }
.listening .mon .mouth-o { opacity: 1; }
/* 기쁨: 눈 감고 활짝 */
.happy .mon .eyes { opacity: 0; } .happy .mon .shut { opacity: 1; } .happy .mon .mouth-open { opacity: 1; }
.happy .mon .who { animation: mon-hop .32s ease-in-out 2 alternate; }
@keyframes mon-hop { to { transform: translateY(-9px) scale(1.03, .97); } }
/* 말하기: 벌린 입 깜빡 */
.talking .mon .mouth-open { animation: mon-mouth .22s steps(1) infinite; }
@keyframes mon-mouth { 50% { opacity: 1; } }
/* 손 흔들기(오른팔 올려 흔듦) · 가리키기(오른팔 앞 아래) */
.wave .mon .arm-r { animation: mon-wave .4s ease-in-out infinite alternate; }
.wave .mon .sparks { opacity: 1; }
@keyframes mon-wave { from { transform: rotate(-125deg); } to { transform: rotate(-95deg); } }
.point .mon .arm-r { transform: rotate(-25deg); }
@media (prefers-reduced-motion: reduce) { .happy .mon .who, .wave .mon .arm-r { animation: none; } .wave .mon .arm-r { transform: rotate(-110deg); } }