/* 로그인 대표 캐릭터·공 위 친구(login-mascot.js, 2026-10-26). 크기·그림 칸은 스크립트가 기기 화소 정수 배율로 정한다.
   도트 그림이라 pixelated만, 그림자·흐림·늘이기 없음. 대표 캐릭터는 로고 뒤(.lgSky 층)에서 발이 로고에 살짝 가려진다. */
body #login .lgHero, body #login .lgFriend { position: absolute; display: block; background-repeat: no-repeat; image-rendering: pixelated; }
/* 대표 캐릭터 자리만큼 로고·로그인 창을 아래로(로고 높이 164px, 가운데 168 → 302px, qplay-theme.css 값을 덮음. 친구 공도 이 값을 따라 내려감).
   1536×864에서 다람쥐(4배 332px) 머리가 화면 위에 닿지 않고 로그인 창 아래가 넘치지 않는 값(1366×768·1280×720은 3배).
   발바닥은 로고 글자 윗부분 뒤(요청서: 발 쪽 몇 칸만 가려지고 얼굴·든 앞발·연필은 로고 위). 숨쉬기는 도트 한 칸(--dot)만큼, 칸을 건너뛰듯(steps). */
body #login .lgMid { --lg-logo-y: 302px; padding-top: 220px; }
body #login .lgHero { left: 50%; top: calc(var(--lg-logo-y) - 52px); translate: -50% -100%; pointer-events: auto; cursor: pointer;
  animation: lg-hero-breath 1.8s steps(1) infinite; }
body #login .lgHero.hop { animation: lg-hero-hop .5s steps(4) 1, lg-hero-breath 1.8s steps(1) .5s infinite; }
@keyframes lg-hero-breath { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--dot) * -1)); } }
@keyframes lg-hero-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(calc(var(--dot) * -6)); } }
/* 로고는 큐플레이처럼 로그인 창 윗부분에 살짝 걸친다(창보다 앞). 그만큼 생긴 위쪽 자리에 다람쥐(2026-10-26 사용자 "로고를 더 아래로 당겨서"). */
body #login .lgMid > .lgLogo { z-index: 2; margin-bottom: -38px; }
/* 친구는 공 꼭대기에 올라앉는다(발이 공 윗부분에 살짝 묻힘). */
body #login .lgFriend { left: 50%; bottom: 62%; translate: -50% 0; }
@media (prefers-reduced-motion: reduce) { body #login .lgHero, body #login .lgHero.hop { animation: none; } }
/* 회원가입(성별·피부색 칸이 열려 창이 길어짐): 1366×768·1280×720에서 창이 화면 밖으로 넘치지 않게 로고를 줄인다.
   다람쥐는 남은 자리에 맞는 배율로(login-mascot.js, 낮은 화면은 2배) 그대로 보인다(사용자 "회원가입화면에도 다람쥐가 보이게"). */
body #login:has(.lgSex:not(.hide)) .lgMid { --lg-logo-y: 210px; padding-top: 150px; }
body #login:has(.lgSex:not(.hide)) .lgHero { top: calc(var(--lg-logo-y) - 58px); }
body #login:has(.lgSex:not(.hide)) .lgLogo .quiz-brand { --brand-letter-size: 84px; --brand-height: 120px; --brand-width: 420px; margin-inline: -11px; }
body #login:has(.lgSex:not(.hide)) .lgMascot:is([data-friend="chick"], [data-friend="rabbit"]) { margin-top: 52px; }