/* OX 팩토리 — 출석 보상 캐릭터 팝업 v2 · 🎨 디자인 #1 · 2026-10-25 · 클래스 ap- · 색은 라이브 :root(--o · --x · --ink · --sub)
   그림 = 🖍 #10 두 컷(투명 배경 · docs/illust/scenes/attendance/): ① 빈 병 흔들며 식은땀 → ② 코인을 한 아름 안고 신남
   상태 클래스도 ap- 로 시작(ap-on · ap-talk · ap-swap · ap-ready · ap-out) — 라이브의 .coin · .on 과 겹치지 않게 */
.ap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;--ap-o:var(--o,#FF5A1F);--ap-x:var(--x,#1C1C1E)}
.ap-dim{position:absolute;inset:0;background:rgba(28,28,30,.55);opacity:0;transition:opacity .25s}
.ap.ap-on .ap-dim{opacity:1}
.ap-card{position:relative;width:min(358px,100%);margin-top:70px;background:#fff;border-radius:28px;padding:279px 18px 14px;box-shadow:0 34px 70px -24px rgba(0,0,0,.55);
 opacity:0;transform:translateY(46px) scale(.92);transition:transform .55s cubic-bezier(.2,1.3,.3,1),opacity .2s}
.ap.ap-on .ap-card{opacity:1;transform:none}
.ap.ap-out .ap-card{opacity:0;transform:scale(.94);transition:transform .28s cubic-bezier(.5,0,.75,.2),opacity .24s}
.ap.ap-out .ap-dim{opacity:0;transition-delay:.06s}

/* 그림 — 폭 280px · 카드 위로 70px 튀어나온다(#10 크기 기준 size-check-390.png) */
.ap-art{position:absolute;left:50%;top:-70px;width:280px;height:345px;margin-left:-140px;pointer-events:none;
 opacity:0;transform:translateY(-26px) scale(.9);transition:transform .6s .12s cubic-bezier(.25,1.5,.45,1),opacity .2s .12s}
.ap.ap-on .ap-art{opacity:1;transform:none}
.ap-art::before{content:"";position:absolute;left:24%;right:24%;bottom:6px;height:16px;border-radius:50%;background:rgba(28,28,30,.13);filter:blur(3px)}
.ap-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 94%}
.ap-a{animation:ap-shake 1.5s .85s ease-in-out infinite}           /* ① 병을 흔든다 */
@keyframes ap-shake{0%,44%,100%{transform:none}8%{transform:rotate(-3deg)}16%{transform:rotate(3deg)}24%{transform:rotate(-2.5deg)}32%{transform:rotate(2deg)}}
.ap-b{opacity:0;transform:scale(.82) translateY(12px)}
.ap.ap-swap .ap-a{opacity:0;transform:scale(.92);animation:none;transition:opacity .14s,transform .2s}
.ap.ap-swap .ap-b{opacity:1;transform:none;transition:transform .48s .06s cubic-bezier(.3,1.65,.5,1),opacity .12s .06s;animation:ap-hop 1.1s .65s ease-in-out infinite}  /* ② 신나서 들썩 */
@keyframes ap-hop{0%,100%{transform:none}50%{transform:translateY(-6px) rotate(1.2deg)}}
.ap-spark{position:absolute;left:50%;top:60%;width:0;height:0}
.ap-spark b{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:#FFD54A;opacity:0}
.ap-spark b:nth-child(odd){width:5px;height:5px;margin:-2.5px;background:var(--ap-o)}
.ap.ap-swap .ap-spark b{animation:ap-sp .75s .1s ease-out forwards}
@keyframes ap-sp{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}

/* 말풍선(만화) — 그림 아래, 꼬리가 위로 캐릭터를 가리킨다 */
.ap-bub{position:relative;margin:2px 0 14px;background:#fff;border:2.5px solid var(--ap-x);border-radius:20px;padding:12px 15px 13px;text-align:left;
 transform-origin:50% -10%;opacity:0;transform:rotate(-1.2deg) scale(.6)}
.ap-bub svg{position:absolute;left:calc(50% - 8px);top:-19px;width:30px;height:21px;transform:scaleY(-1)}
.ap.ap-talk .ap-bub{opacity:1;transform:rotate(-1.2deg);transition:transform .42s cubic-bezier(.3,1.6,.5,1),opacity .12s}
.ap-bub span{display:block;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .3s}
.ap-bub span.on{opacity:1;transform:none}
.ap-bub .l1{font-size:20px;font-weight:850;letter-spacing:-.035em;line-height:1.25;color:var(--ap-x);word-break:keep-all}
.ap-bub .l2{margin-top:7px;font-size:15px;line-height:1.4;color:var(--sub,#5B5F66);word-break:keep-all}
.ap-bub .l3{margin-top:3px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ap-x);word-break:keep-all}
.ap-bub em{font-style:normal;color:var(--ap-o)}

.ap-body{text-align:center}
.ap-go{width:100%;height:58px;border:0;border-radius:17px;background:var(--ap-o);color:#fff;font:inherit;font-size:18.5px;font-weight:800;letter-spacing:-.01em;
 display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .35s,filter .15s}
.ap.ap-ready .ap-go{opacity:1;transform:none}
.ap-go:active{filter:brightness(.92)}
.ap-go:focus{outline:none}.ap-go:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(255,90,31,.45)}
.ap-go i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE38A,#F2B21B 60%,#D98E00);box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.ap-fine{margin:10px 0 0;font-size:12px;color:#A39C91}

/* 금화가 코인 칩으로(여러 개가 줄지어) */
.ap-flyx{position:fixed;z-index:72;pointer-events:none;transition:transform .66s cubic-bezier(.45,0,.55,1)}
.ap-flyy{transition:transform .66s cubic-bezier(.15,.75,.4,1)}
.ap-flyy i{display:block;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE38A,#F2B21B 60%,#D98E00);box-shadow:0 4px 10px -3px rgba(150,95,0,.6)}
.ap-bump{animation:ap-bump .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes ap-bump{40%{transform:scale(1.16)}}

@media (min-width:861px){.ap-card{width:380px;padding-top:298px;margin-top:76px}.ap-art{width:300px;height:370px;margin-left:-150px;top:-76px}}
@media (prefers-reduced-motion:reduce){
 .ap *,.ap{animation:none!important;transition-duration:.12s!important;transition-delay:0s!important}
 .ap-card,.ap.ap-on .ap-card,.ap-art,.ap.ap-on .ap-art,.ap-art img,.ap-bub span,.ap-go{transform:none!important}
 .ap-bub,.ap.ap-talk .ap-bub{transform:rotate(-1.2deg)!important}
}