/* 조인커뮤니티 캐릭터 이모티콘 (emoji/NN-이름.webp 움직임, -still.webp 멈춘 그림 — 움직임 줄이기 설정 기기용) */
.emo { display: inline-block; flex-shrink: 0; line-height: 0; }
.emo img { display: block; width: 80px; height: 80px; }
.emo-lg img { width: 110px; height: 110px; }
.emo-sm img { width: 56px; height: 56px; }

/* 첫 화면 */
.jh-hero-main { position: relative; }
.jh-hero-emo { position: absolute; right: 0; top: -10px; }
.jh-banner .emo { position: relative; z-index: 1; margin-left: auto; }
.jh-foot-emo { display: flex; justify-content: center; margin-bottom: 4px; }
@media (max-width: 900px) {
  .jh-hero-emo { top: -18px; }
  .jh-hero-emo img { width: 84px; height: 84px; }
}
@media (max-width: 560px) {
  .jh-hero-emo { display: none; }
  .jh-banner .emo { position: absolute; right: 12px; top: 10px; }
  .jh-banner .emo img { width: 64px; height: 64px; }
  .jh-banner > div:first-of-type { padding-right: 70px; }
}

/* 둥실둥실 떠 있는 움직임 (움직임 줄이기 설정 기기에서는 멈춤) */
@keyframes emo-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-6px) rotate(-3deg); } 75% { transform: translateY(-3px) rotate(3deg); } }
.emo img { animation: emo-bob 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.jh-banner .emo img { animation-delay: -1s; }
.jh-foot-emo .emo img { animation-delay: -2s; }
@media (prefers-reduced-motion: reduce) { .emo img { animation: none; } }