/* 응원 캐릭터(선생님 친구들) (assets/js/mascot.js)
   3D로 미리 그린 24장을 가로로 이어 붙인 그림을 초당 12장으로 돌린다. 기본은 처음부터 움직이고, .still 을 붙이면 멈춘다. */

.msc { display: inline-block; position: relative; vertical-align: middle; aspect-ratio: 200 / 220; height: auto; max-width: 100%; flex: none; }
/* 그림 둘레 여백(만세·꽃가루 자리)만큼 칸 밖으로 넘겨 그려 캐릭터가 작아 보이지 않게 */
.msc-sheet { position: absolute; left: -11%; right: -11%; top: -20%; bottom: -2%; pointer-events: none; background-repeat: no-repeat; background-size: 2400% 100%; background-position: 0 0; animation: msc-run 2s steps(24, jump-none) infinite; }
@keyframes msc-run { to { background-position: 100% 0; } }

/* ---------- 말풍선 카드 ---------- */
.msc-card { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.msc-card .msc { display: block; }
.msc-bubble {
  position: relative; max-width: 250px; padding: 8px 14px;
  font-size: 14px; font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; text-align: center;
  color: #0f2a5f; background: #fff; border: 1.5px solid #dfe4ec; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 42, 95, .06), 0 6px 18px rgba(15, 42, 95, .08);
  word-break: keep-all; overflow-wrap: break-word;
  transform-origin: 50% 100%;
  animation: msc-pop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.msc-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -7.5px; width: 12px; height: 12px;
  background: inherit; border-right: inherit; border-bottom: inherit; border-bottom-right-radius: 3px;
  transform: translateX(-50%) rotate(45deg);
}
.msc-card-cheer .msc-bubble { background: #fff7ee; border-color: #f7cd9c; }
.msc-card-good  .msc-bubble { background: #f3f8ff; border-color: #c4d8fb; }
.msc-card-great .msc-bubble { background: #effaf9; border-color: #a6e0dd; }
.msc-card-star  .msc-bubble { background: #fffbe6; border-color: #f2d36a; }
@keyframes msc-pop {
  0% { opacity: 0; transform: translateY(6px) scale(.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 멈춤 고리 */
.msc.still *, .msc-card.still *, .still .msc * { animation-play-state: paused !important; }
/* 멈춘 상태에서 말풍선이 첫 장면(투명)에 멈춰 사라지지 않도록 바로 다 보이게 */
.msc-card.still .msc-bubble, .still .msc-card .msc-bubble { animation: none; }