/* 대통령 키우기 — 무대 캐릭터 포즈 애니메이션 (js/stage.js와 짝) */
.chibi { display: block; overflow: visible; }
.chibi .arm, .chibi .leg, .chibi .ch-head, .chibi .ch-body { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }

/* 기본: 숨쉬기 */
.chibi .ch-body { animation: chBreathe 3.2s ease-in-out infinite; }
@keyframes chBreathe { 50% { transform: translateY(1.6px) scaleY(.988); } }

/* 손 흔들기 */
.pose-wave .arm.r { transform: rotate(-128deg); animation: chWave .9s ease-in-out infinite; }
@keyframes chWave { 0%, 100% { transform: rotate(-116deg); } 50% { transform: rotate(-140deg); } }   /* 머리에서 떨어진 바깥쪽에서 흔든다 */
.pose-wave .motion { animation: chFade .9s ease-in-out infinite; }

/* 걷기(골목 유세) */
.pose-walk .ch-body { animation: chBob .52s ease-in-out infinite; }
.pose-walk .leg.l { animation: chLegA .52s ease-in-out infinite; } .pose-walk .leg.r { animation: chLegB .52s ease-in-out infinite; }
.pose-walk .arm.l { animation: chArmA .52s ease-in-out infinite; } .pose-walk .arm.r { animation: chArmB .52s ease-in-out infinite; }
@keyframes chBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes chLegA { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }
@keyframes chLegB { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes chArmA { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(18deg); } }
@keyframes chArmB { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(22deg); } }

/* 책 읽기(정책 공부) */
.pose-read .arm.l { transform: rotate(-38deg); } .pose-read .arm.r { transform: rotate(38deg); }
.pose-read .ch-head { animation: chNod 2.4s ease-in-out infinite; }
@keyframes chNod { 0%, 100% { transform: rotate(5deg) translateY(2px); } 50% { transform: rotate(8deg) translateY(4px); } }

/* 잠(휴식) */
.pose-sleep .ch-head { transform: rotate(16deg) translate(3px, 5px); }
.pose-sleep .ch-body { animation: chBreatheDeep 3.6s ease-in-out infinite; }
.pose-sleep .z { animation: chZ 2.4s ease-in-out infinite; opacity: 0; }
.pose-sleep .z2 { animation-delay: .5s; } .pose-sleep .z3 { animation-delay: 1s; }
@keyframes chBreatheDeep { 50% { transform: translateY(2.5px) scaleY(.975); } }
@keyframes chZ { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -10px); } }

/* 환호(성공·당선) */
.pose-cheer .arm.l { transform: rotate(128deg); } .pose-cheer .arm.r { transform: rotate(-128deg); }   /* 만세: V자로 벌린다 */
.pose-cheer .ch-body { animation: chJump .7s cubic-bezier(.3, 0, .4, 1) infinite; }
.pose-cheer .st { animation: chTwinkle .7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pose-cheer .s2 { animation-delay: .35s; }
@keyframes chJump { 0%, 100% { transform: translateY(0) scaleY(1); } 15% { transform: translateY(0) scaleY(.94); } 50% { transform: translateY(-16px) scaleY(1.03); } }
@keyframes chTwinkle { 50% { transform: scale(1.35) rotate(20deg); } }

/* 낙심(실패·낙선) */
.pose-slump .ch-head { transform: translateY(7px) rotate(-5deg); }
.pose-slump .ch-body { animation: none; transform: translateY(3px); }
.pose-slump .arm.l { transform: rotate(6deg); } .pose-slump .arm.r { transform: rotate(-6deg); }
.pose-slump .cloud { animation: chCloud 3s ease-in-out infinite; }
.pose-slump .drop { animation: chRain .9s linear infinite; } .pose-slump .d2 { animation-delay: .3s; } .pose-slump .d3 { animation-delay: .6s; }
@keyframes chCloud { 50% { transform: translateX(4px); } }
@keyframes chRain { from { transform: translateY(0); opacity: 1; } to { transform: translateY(16px); opacity: 0; } }
@keyframes chFade { 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) { .chibi * { animation: none !important; transition: none !important; } }

/* ── 무대 연출: 계절 · 밤 · 큰 사건 ── */
.stage-panel .season, .stage-panel .night, .stage-panel .stage-fx { position: absolute; inset: 0; pointer-events: none; }
.stage-panel .season { z-index: 3; overflow: hidden; }
.season i { position: absolute; top: -14px; width: 13px; height: 10px; border-radius: 60% 0 60% 0; animation: fall 7s linear infinite; opacity: .9; }
.season.petal i { background: #F6B8C8; box-shadow: inset 0 0 0 1px rgba(200,90,120,.35); }
.season.leaf i { background: #E08A2E; width: 14px; height: 11px; box-shadow: inset 0 0 0 1px rgba(120,60,10,.35); }
.season i:nth-child(1) { left: 6%;  animation-delay: 0s; }    .season i:nth-child(2) { left: 18%; animation-delay: 2.4s; animation-duration: 8s; }
.season i:nth-child(3) { left: 31%; animation-delay: 4.8s; }  .season i:nth-child(4) { left: 44%; animation-delay: 1.2s; animation-duration: 9s; }
.season i:nth-child(5) { left: 58%; animation-delay: 3.6s; }  .season i:nth-child(6) { left: 69%; animation-delay: 6s; animation-duration: 7.5s; }
.season i:nth-child(7) { left: 79%; animation-delay: .8s; animation-duration: 8.5s; } .season i:nth-child(8) { left: 89%; animation-delay: 5.2s; }
.season i:nth-child(9) { left: 96%; animation-delay: 3s; animation-duration: 9.5s; }
.season.leaf i:nth-child(3n) { background: #C9562A; } .season.leaf i:nth-child(4n) { background: #E6B13A; }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(14px, 70px) rotate(90deg); } 50% { transform: translate(-6px, 140px) rotate(180deg); } 75% { transform: translate(12px, 210px) rotate(270deg); } 100% { transform: translate(0, 290px) rotate(360deg); } }

.stage-panel .night { z-index: 1; background: rgba(24, 30, 72, .5); animation: nightIn .8s ease both; }
.night .moon { position: absolute; top: 14px; right: 34px; width: 34px; height: 34px; border-radius: 50%; box-shadow: 10px -4px 0 0 #FFF3C4; filter: drop-shadow(0 0 8px rgba(255,243,196,.6)); }
@keyframes nightIn { from { opacity: 0; } }

.stage-panel .stage-fx { z-index: 4; overflow: hidden; animation: nightIn .3s ease both; }
.stage-fx .ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: center; overflow: hidden; line-height: 1; background: rgba(20,20,20,.88); color: #fff; font-weight: 700; font-size: 14px; }
.stage-fx .ticker strong { flex: none; align-self: stretch; display: flex; align-items: center; line-height: 1; padding: 0 12px; position: relative; z-index: 1; background: #D62F2F; font-weight: 800; letter-spacing: .04em; }
.stage-fx.fx-flash .ticker strong { background: #F2C230; color: #141414; }
.stage-fx .ticker span { display: flex; white-space: nowrap; animation: tick 14s linear infinite; }
.stage-fx .ticker em { font-style: normal; padding-left: 40px; }
.stage-fx .ticker em::before { content: '● '; color: #F2C230; font-size: 10px; vertical-align: 2px; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.stage-fx.fx-breaking, .stage-fx.fx-siren { box-shadow: inset 0 0 0 4px rgba(214,47,47,.0); animation: alertPulse 1.6s ease-in-out infinite; }
@keyframes alertPulse { 50% { box-shadow: inset 0 0 60px 6px rgba(214,47,47,.45); } }
.stage-fx .beacon { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(214,47,47,.35), transparent 40%, transparent 60%, rgba(47,90,214,.35)); animation: beacon .8s steps(2) infinite; }
@keyframes beacon { 50% { transform: scaleX(-1); } }
.stage-fx.fx-flash i { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(#fff 0 18%, rgba(255,255,255,.7) 30%, transparent 70%); opacity: 0; animation: flash 2.2s ease-out infinite; }
.fx-flash i:nth-child(1) { left: 6%;  top: 30%; } .fx-flash i:nth-child(2) { left: 22%; top: 8%;  animation-delay: .5s; }
.fx-flash i:nth-child(3) { right: 8%; top: 22%; animation-delay: 1s; } .fx-flash i:nth-child(4) { right: 24%; top: 48%; animation-delay: 1.4s; }
.fx-flash i:nth-child(5) { left: 38%; top: 52%; animation-delay: 1.8s; }
@keyframes flash { 0% { opacity: 0; transform: scale(.4); } 6% { opacity: 1; transform: scale(1); } 22% { opacity: 0; transform: scale(1.2); } 100% { opacity: 0; } }
@media (max-width: 759px) { .stage-fx .ticker { height: 26px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .season, .stage-fx .beacon, .stage-fx.fx-flash i { display: none; } .stage-fx, .stage-fx .ticker span { animation: none !important; } }

/* ── 도트 캐릭터: 두 장을 번갈아 보여 주는 프레임 애니메이션(--pxs 한 바퀴) ── */
.pix { image-rendering: pixelated; }
.pix .pf0 { animation: pxA var(--pxs, 1.2s) linear infinite; }
.pix .pf1 { animation: pxB var(--pxs, 1.2s) linear infinite; }
@keyframes pxA { 0%, 49.9% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@keyframes pxB { 0%, 49.9% { visibility: hidden; } 50%, 100% { visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .pix .pf0, .pix .pf1 { animation: none !important; } }