/* GGGom Song — 귀요미 러블리 파스텔 ✦ 글꼴: Jua(한글), Fredoka(영문) — 둘 다 OFL, fonts/licenses */
@font-face { font-family: "Jua"; src: url(../fonts/Jua.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Fredoka"; src: url(../fonts/Fredoka-Bold.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
:root { --pink: #ff7eb6; --pink2: #ffd3e8; --mint: #7fe0b8; --sky: #8fd3ff; --lilac: #c4a8ff; --sun: #ffd84d; --ink: #2f5d6e; --sky2: #4fb6ea; --lime: #8fd85a; --pinkA: #ff8fc0; --card: rgba(255,255,255,.82);
  --safe-t: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); --safe-b: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { font-family: "Fredoka", "Jua", sans-serif; color: var(--ink); overflow-x: hidden;
  background: linear-gradient(165deg, #d6efff 0%, #e2f8ff 30%, #e4fbe6 62%, #f1ffd6 85%, #ffeef6 100%) fixed; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }

/* 둥실 별·하트 */
#floaters { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
#floaters span { position: absolute; bottom: -40px; color: #fff; text-shadow: 0 0 8px #9fdcff, 0 0 2px #4fb6ea; opacity: .85; animation: floatUp linear infinite; }
#floaters span:nth-child(3n) { color: #ffe27a; } #floaters span:nth-child(4n) { color: #ffb3d6; } #floaters span:nth-child(5n) { color: #b8f08a; }
@keyframes floatUp { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(18px, -55vh) rotate(160deg); } 100% { transform: translate(-10px, -115vh) rotate(360deg); opacity: 0; } }
#tapfx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }

.top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + var(--safe-t)) 16px 6px; }
.logo { margin: 0; font-size: 28px; color: var(--sky2); letter-spacing: .5px; text-shadow: 0 3px 0 #fff, 0 5px 0 #b8e986; }
.logo .sp { color: var(--sun); display: inline-block; animation: twinkle 1.6s ease-in-out infinite; }
.logo .sp:last-child { animation-delay: .8s; }
@keyframes twinkle { 0%,100% { transform: scale(.7) rotate(0); opacity: .6; } 50% { transform: scale(1.2) rotate(30deg); opacity: 1; } }
.pill-btn { background: #fff; border-radius: 999px; padding: 10px 16px; min-height: 44px; font-size: 16px; box-shadow: 0 4px 0 #b6e2f5; transition: transform .12s; }
.pill-btn:active { transform: translateY(3px) scale(.96); box-shadow: 0 1px 0 #b6e2f5; }

main { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 6px 14px calc(30px + var(--safe-b)); }
.screen { display: none; } .screen.on { display: block; animation: popIn .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes popIn { from { transform: scale(.94); opacity: 0; } }
.card { background: var(--card); border-radius: 26px; padding: 14px; margin: 12px 0; box-shadow: 0 6px 0 rgba(140,205,235,.35), 0 10px 24px rgba(90,170,200,.15); border: 3px solid #fff; }
.hero { display: flex; align-items: center; gap: 8px; }
.hero-cast { display: flex; align-items: flex-end; flex: none; }
.hero-cast i { width: 46px; height: 52px; background-size: 800% 100%; background-repeat: no-repeat; animation: bop .7s ease-in-out infinite alternate; }
.hero-cast i.mid { width: 60px; height: 68px; animation-delay: .35s; }
@keyframes bop { to { transform: translateY(-6px) rotate(3deg); } }
.lead { margin: 0; font-size: 18px; line-height: 1.35; }
.lbl { font-size: 18px; margin: 2px 4px 8px; } .lbl.small { font-size: 15px; margin-top: 12px; opacity: .8; }
textarea { width: 100%; border: 3px dashed #9fd8f5; border-radius: 18px; padding: 12px; font: 20px/1.4 "Fredoka", "Jua", sans-serif; color: var(--ink); background: #fbfffd; resize: vertical; outline: none; }
textarea:focus { border-style: solid; border-color: var(--sky2); box-shadow: 0 0 0 5px rgba(79,182,234,.18); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: linear-gradient(#fff, #f0fbff); border-radius: 999px; padding: 10px 16px; min-height: 44px; font-size: 17px; box-shadow: 0 4px 0 #b8e986; transition: transform .15s cubic-bezier(.3,1.8,.5,1); }
.chip:nth-child(3n+2) { box-shadow: 0 4px 0 #a9dcf7; } .chip:nth-child(3n) { box-shadow: 0 4px 0 #ffc6de; }
.chip:active { transform: translateY(3px) scale(.94); }
.genres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.genre { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 #cdebd0; transition: transform .2s cubic-bezier(.3,1.8,.5,1); }
.genre .ge { font-size: 34px; } .genre b { font-size: 20px; } .genre small { font-size: 12.5px; opacity: .75; }
.genre.on { color: #fff; transform: translateY(-3px) scale(1.04); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.genre.on[data-g=kids] { background: linear-gradient(160deg, #ff9cc9, #ffc1a8); box-shadow: 0 5px 0 #e2679f, 0 0 0 4px #fff, 0 0 18px #ffb3d6; }
.genre.on[data-g=rap] { background: linear-gradient(160deg, #7fd64f, #c3ea5a); box-shadow: 0 5px 0 #5aa834, 0 0 0 4px #fff, 0 0 18px #c9f2a0; }
.genre.on[data-g=ballad] { background: linear-gradient(160deg, #5cbcf2, #9fd8ff); box-shadow: 0 5px 0 #3a93c8, 0 0 0 4px #fff, 0 0 18px #a9dcf7; }
.genre[data-g=rap] { box-shadow: 0 5px 0 #cdebb0; } .genre[data-g=ballad] { box-shadow: 0 5px 0 #bfe3f5; }
.genre.on .ge { animation: bop .5s ease-in-out infinite alternate; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 18px; border-radius: 999px; font-size: 18px; color: #fff; background: var(--sky);
  box-shadow: 0 6px 0 rgba(0,0,0,.12), inset 0 -4px 0 rgba(0,0,0,.08), inset 0 4px 0 rgba(255,255,255,.4); transition: transform .14s cubic-bezier(.3,1.8,.5,1); text-shadow: 0 1px 0 rgba(0,0,0,.12); position: relative; }
.btn:active { transform: translateY(4px) scale(.95); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.btn:disabled { filter: grayscale(.6); opacity: .55; }
.btn.big { min-height: 64px; font-size: 22px; }
.btn.main { background: linear-gradient(135deg, #79cf4a, #4fb6ea); } .btn.pink { background: linear-gradient(135deg, #ff8fc0, #ffb36b); }
.btn.mint { background: linear-gradient(135deg, #5fd3a0, #9fdc5a); } .btn.sky { background: linear-gradient(135deg, #5cbcf2, #7fd6e8); } .btn.lilac { background: linear-gradient(135deg, #8fd85a, #ff9cc9); }
#makeBtn { width: 100%; margin-top: 6px; animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.03); } }
.foot { text-align: center; font-size: 14px; opacity: .7; }

.kbar { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.ktitle { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage { padding: 10px; background: linear-gradient(#fff, #f2fbf2); }
#strip { width: 100%; height: 170px; display: block; border-radius: 16px; background: repeating-linear-gradient(90deg, rgba(140,205,235,.2) 0 1px, transparent 1px 110px), #fbfeff; }
.lyric { min-height: 78px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 4px 10px; padding: 12px 6px 6px; font-size: 30px; line-height: 1.2; text-align: center; }
.lyric span { color: #a9c4cf; transition: color .15s, transform .2s cubic-bezier(.3,1.8,.5,1); display: inline-block; }
.lyric span.sung { color: #3fa0d6; }
.lyric span.now { color: #fff; background: linear-gradient(135deg, #79cf4a, #4fb6ea); border-radius: 14px; padding: 0 8px; transform: scale(1.18) translateY(-3px); box-shadow: 0 0 14px #b8e986; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.prog { height: 10px; border-radius: 9px; background: #e3f4fb; overflow: hidden; } .prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8fd85a, #ffd84d, #4fb6ea, #ff9cc9); border-radius: 9px; }
.ctrls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ctrls #saveMixBtn { grid-column: span 2; }

.busy { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(225,245,255,.78); backdrop-filter: blur(3px); }
.busy[hidden] { display: none; }
.busy-in { text-align: center; font-size: 20px; } .note-spin { font-size: 64px; color: var(--sky2); animation: spinBounce 1s ease-in-out infinite; }
@keyframes spinBounce { 50% { transform: translateY(-14px) rotate(20deg) scale(1.1); } }

/* 알림(toast.js) */
.app-toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translate(-50%, 30px); z-index: 80; opacity: 0; pointer-events: none; transition: .25s cubic-bezier(.3,1.6,.5,1);
  background: #fff; border: 3px solid #bfe6ff; border-radius: 22px; padding: 10px 18px; box-shadow: 0 8px 24px rgba(80,160,200,.25); max-width: 90vw; text-align: center; }
.app-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.app-toast-msg { font-size: 17px; } .app-toast-sub { font-size: 13px; opacity: .7; } .app-toast-act { pointer-events: auto; margin-top: 6px; background: var(--pink); color: #fff; border-radius: 999px; padding: 6px 14px; }

/* ───── 칭찬 장면 (praise.js) ───── */
.praise { position: fixed; inset: 0; z-index: 50; overflow: hidden; animation: pzIn .35s ease-out; font-family: "Fredoka", "Jua", sans-serif; }
.praise.bye { opacity: 0; transition: opacity .3s; }
@keyframes pzIn { from { opacity: 0; transform: scale(1.06); } }
.pz-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.pz-fx, .pz-props, .pz-cast { position: absolute; inset: 0; pointer-events: none; }
.pz-fx { z-index: 1; } .pz-props { z-index: 2; } .pz-cast { z-index: 3; }
.pz-title { position: absolute; left: 0; right: 0; top: calc(9% + var(--safe-t)); z-index: 5; text-align: center; }
.pz-title span { display: inline-block; font-size: 7.5vmin; color: #fff; padding: 6px 18px; border-radius: 999px; background: linear-gradient(135deg, rgba(79,182,234,.9), rgba(121,207,74,.9)); box-shadow: 0 5px 0 rgba(170,60,120,.35), 0 0 20px rgba(255,255,255,.6); animation: titlePop .6s cubic-bezier(.3,1.8,.5,1) both .2s; }
@keyframes titlePop { from { transform: scale(0) rotate(-8deg); } }
.pz-skip { position: absolute; bottom: calc(12px + var(--safe-b)); left: 0; right: 0; text-align: center; color: #fff; opacity: .8; font-size: 14px; z-index: 5; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.card-on .pz-skip { display: none; }

.pz-prop { position: absolute; transform: translate(-50%, -50%); line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); animation: propIn .6s cubic-bezier(.3,1.8,.5,1) both; }
@keyframes propIn { from { transform: translate(-50%, -50%) scale(0); } }
.pz-prop.a-launch { animation: launch 3.2s ease-in .3s both; } @keyframes launch { 0% { transform: translate(-50%, 120%); } 30% { transform: translate(-50%, -50%); } 100% { transform: translate(-50%, -700%) scale(.6); } }
.pz-prop.a-swim { animation: swim 3s ease-in-out infinite alternate; } @keyframes swim { from { transform: translate(-80%, -50%); } to { transform: translate(-20%, -60%) scaleX(1); } }
.pz-prop.a-wave { animation: wand .5s ease-in-out infinite alternate; } @keyframes wand { from { transform: translate(-50%, -50%) rotate(-25deg); } to { transform: translate(-50%, -50%) rotate(25deg); } }
.pz-prop.a-beat { animation: beat var(--beat) ease-in-out infinite; } @keyframes beat { 50% { transform: translate(-50%, -50%) scale(1.18); } }
.pz-prop.a-spin { animation: spinP 2.4s linear infinite; } @keyframes spinP { to { transform: translate(-50%, -50%) rotate(360deg); } }
.pz-prop.a-open { animation: openP .8s cubic-bezier(.3,1.8,.5,1) .4s both; } @keyframes openP { 0% { transform: translate(-50%, -50%) scale(.5); } 60% { transform: translate(-50%, -60%) scale(1.2) rotate(-6deg); } }
.pz-prop.a-rise { animation: riseP 1.6s ease-out .8s both; } @keyframes riseP { from { transform: translate(-50%, 100%) scale(.2); opacity: 0; } }

/* 친구 9명 */
.pz-pc { position: absolute; transform: translate(-50%, -100%); animation-delay: var(--d); }
.pz-pc > i { position: absolute; inset: 0; background-size: 800% 100%; background-repeat: no-repeat; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); animation: var(--bopA, none) var(--beat) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
.pz-pc.front { z-index: 2; }
.pz-pc.star > i { filter: drop-shadow(0 0 12px #fff6a8) drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.e-pop { animation: ePop .6s cubic-bezier(.3,1.8,.5,1) both var(--d); } @keyframes ePop { from { transform: translate(-50%, -100%) scale(0); } }
.e-drop { animation: eDrop .7s cubic-bezier(.3,1.5,.5,1) both var(--d); } @keyframes eDrop { from { transform: translate(-50%, -400%); } }
.e-rise { animation: eRise .9s cubic-bezier(.3,1.4,.5,1) both var(--d); } @keyframes eRise { from { transform: translate(-50%, 300%); opacity: 0; } }
.e-slide { animation: eSlide .9s cubic-bezier(.3,1.3,.5,1) both var(--d); } @keyframes eSlide { from { transform: translate(-400%, -300%) rotate(-30deg); } }
.e-spin { animation: eSpin .8s ease-out both var(--d); } @keyframes eSpin { from { transform: translate(-50%, -100%) scale(0) rotate(-360deg); } }
.e-bloom { animation: eBloom .8s cubic-bezier(.3,1.8,.5,1) both var(--d); } @keyframes eBloom { from { transform: translate(-50%, -100%) scaleY(0); transform-origin: bottom; } }
.e-launch { animation: eRise .9s cubic-bezier(.3,1.4,.5,1) both var(--d); }
.b-bounce { --bopA: bBounce; } @keyframes bBounce { from { transform: translateY(0) scale(1, 1); } to { transform: translateY(-14%) scale(.97, 1.03); } }
.b-sway { --bopA: bSway; } @keyframes bSway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.b-float { --bopA: bFloat; } @keyframes bFloat { from { transform: translateY(-6%); } to { transform: translateY(6%) rotate(3deg); } }
.b-dance { --bopA: bDance; } @keyframes bDance { from { transform: translateX(-8%) rotate(-10deg); } to { transform: translateX(8%) translateY(-10%) rotate(10deg); } }
.b-carousel { --bopA: bFloat; }
.hold { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.h-glow { top: 10%; left: 85%; width: 8%; height: 45%; border-radius: 99px; background: linear-gradient(#fff, #7fffd4); box-shadow: 0 0 12px #7fffd4, 0 0 24px #ff7eb6; animation: bSway var(--beat) ease-in-out infinite alternate; transform-origin: bottom; }
.pz-pc:nth-child(2n) .h-glow { background: linear-gradient(#fff, #ff9ad5); box-shadow: 0 0 12px #ff9ad5; }
.h-bubble { top: -12%; left: -12%; width: 124%; height: 124%; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), rgba(180,230,255,.15) 40%, rgba(255,180,230,.2)); }
.h-balloon, .h-hotair { bottom: 92%; width: 70%; height: 70%; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), var(--bc, #ff8cc6); }
.h-balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 40%; background: #fff; }
.pz-pc:nth-child(3n+1) .hold { --bc: #7fd3ff; } .pz-pc:nth-child(3n+2) .hold { --bc: #ffd84d; } .pz-pc:nth-child(4n) .hold { --bc: #b79bff; }
.h-hotair { width: 110%; height: 90%; background: repeating-linear-gradient(90deg, var(--bc, #ff8cc6) 0 12%, #fff 12% 18%); border-radius: 50% 50% 40% 40% / 55% 55% 45% 45%; }

/* 꾸밈 조각 */
.cur { position: absolute; top: 0; bottom: 0; width: 52%; background: repeating-linear-gradient(90deg, #d8326f 0 18px, #b51f58 18px 30px); box-shadow: inset 0 -20px 30px rgba(0,0,0,.3); z-index: 6; animation: curL 1.1s cubic-bezier(.6,0,.3,1) .15s both; }
.cur.l { left: 0; transform-origin: left; } .cur.r { right: 0; transform-origin: right; animation-name: curR; }
@keyframes curL { to { transform: translateX(-88%) scaleX(.3); } } @keyframes curR { to { transform: translateX(88%) scaleX(.3); } }
.valance { position: absolute; left: 0; right: 0; top: 0; height: calc(7% + var(--safe-t)); background: radial-gradient(circle at 50% 0, #ffd84d 0 3px, transparent 4px) 0 100%/40px 12px repeat-x, #c4245f; z-index: 7; border-bottom: 4px solid #ffd84d; }
.spot { position: absolute; top: -10%; width: 40%; height: 120%; background: linear-gradient(rgba(255,255,230,.55), rgba(255,255,230,0) 90%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); mix-blend-mode: screen; transform-origin: 50% 0; animation: spotSw 2.2s ease-in-out infinite alternate; }
.spot.s1 { left: 0; transform: rotate(-20deg); } .spot.s2 { left: 30%; animation-delay: -.7s; background: linear-gradient(rgba(255,180,230,.5), transparent 90%); } .spot.s3 { left: 60%; animation-delay: -1.4s; background: linear-gradient(rgba(170,220,255,.5), transparent 90%); }
@keyframes spotSw { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(rgba(255,255,255,.15), rgba(255,200,240,.35)), repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 60px); border-top: 4px solid rgba(255,255,255,.5); }
.night { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 10% 20%, #fff, transparent), radial-gradient(2px 2px at 30% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 30%, #fff, transparent), radial-gradient(2px 2px at 85% 55%, #fff, transparent), radial-gradient(1.5px 1.5px at 50% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 20% 80%, #fff, transparent); animation: twinkle 1.8s ease-in-out infinite; }
.rainbow { position: absolute; left: -10%; right: -10%; top: 30%; aspect-ratio: 2/1; border-radius: 50% 50% 0 0; background: radial-gradient(circle at 50% 100%, transparent 45%, #b79bff 45% 50%, #7fd3ff 50% 55%, #7fe0a0 55% 60%, #ffd84d 60% 65%, #ffb36b 65% 70%, #ff7eb6 70% 75%, transparent 75%); animation: propIn .9s ease-out both; transform: none; }
.waves { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: radial-gradient(circle at 50% 0, transparent 22px, #f4d9a8 23px) 0 0/48px 100%; opacity: .9; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(#ffffff, #e6f2ff); border-radius: 50% 50% 0 0 / 30% 30% 0 0; }
.carpet { position: absolute; left: 36%; right: 36%; bottom: 0; height: 60%; background: linear-gradient(#ff5a8a, #c4245f); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); border-top: 3px solid #ffd84d; }
.disco { position: absolute; inset: 0; background: radial-gradient(circle at 20% 70%, rgba(255,120,200,.4) 0 6%, transparent 7%), radial-gradient(circle at 70% 60%, rgba(120,220,255,.4) 0 6%, transparent 7%), radial-gradient(circle at 45% 85%, rgba(255,230,120,.4) 0 6%, transparent 7%); animation: discoMove 1s steps(4) infinite; }
@keyframes discoMove { 50% { transform: translate(8%, -4%); } }

/* 별점 + 스티커 카드 */
.pz-card { position: absolute; left: 50%; top: 50%; z-index: 8; width: min(86vw, 380px); padding: 22px 16px 18px; transform: translate(-50%, -50%); text-align: center; color: var(--ink);
  background: rgba(255,255,255,.95); border-radius: 32px; border: 5px solid #c9ecff; box-shadow: 0 12px 0 rgba(110,190,90,.32), 0 0 40px rgba(255,255,255,.8); animation: cardIn .6s cubic-bezier(.3,1.8,.5,1); }
@keyframes cardIn { from { transform: translate(-50%, -50%) scale(0) rotate(-10deg); } }
.pz-stars b { font-size: 54px; color: #eadbe4; display: inline-block; margin: 0 4px; }
.pz-stars b.on { color: #ffcc33; text-shadow: 0 3px 0 #e8a400, 0 0 16px #fff2a0; animation: starPop .5s cubic-bezier(.3,1.9,.5,1) both; animation-delay: calc(var(--k) * .25s + .2s); }
@keyframes starPop { from { transform: scale(0) rotate(-120deg); } }
.pz-sticker { width: 120px; height: 120px; margin: 6px auto; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(#fff, #eefbe6); border: 5px dashed #8fd85a; box-shadow: 0 6px 0 #cdebb0; transform: rotate(-8deg); animation: stick .7s cubic-bezier(.3,1.8,.5,1) .9s both; }
.pz-sticker span { font-size: 64px; }
@keyframes stick { from { transform: scale(2.4) rotate(30deg); opacity: 0; } }
.pz-msg { font-size: 28px; color: #3a9bd2; margin: 6px 0 12px; }
.pz-ok { min-width: 60%; background: linear-gradient(135deg, #79cf4a, #4fb6ea); }

/* ───── 광고 (ads.js) — 아래 배너 자리는 비워 두어 단추를 가리지 않음 ───── */
body.has-ad main { padding-bottom: calc(var(--ad-h, 50px) + 24px + var(--safe-b)); }
body.has-ad .app-toast { bottom: calc(var(--ad-h, 50px) + 20px + var(--safe-b)); }
.ad-slot { position: fixed; left: 50%; bottom: var(--safe-b); transform: translateX(-50%); z-index: 40; width: min(100vw, 320px); height: 50px; display: grid; place-items: center;
  border: 2px dashed #a9d6ea; border-radius: 10px 10px 0 0; background: rgba(255,255,255,.85); color: #6f9fb3; font-size: 13px; }
body.ad-paused .ad-slot { display: none; }
.ad-ask { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(90,40,80,.35); }
.ad-box { width: min(84vw, 340px); padding: 20px 16px; border-radius: 28px; background: #fff; border: 4px solid #c9ecff; text-align: center; font-size: 19px; color: var(--ink); animation: cardIn .45s cubic-bezier(.3,1.8,.5,1); }
.ad-box.ad-ph { min-height: 160px; display: grid; place-items: center; border-style: dashed; color: #c08aa8; font-size: 18px; }
.ad-gift { font-size: 54px; animation: bop .5s ease-in-out infinite alternate; }
.ad-row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; } .ad-row .btn { flex: 1; min-height: 52px; font-size: 17px; } .ad-row .btn:not(.main) { background: #d9c9d4; }
.pz-sticks { display: flex; justify-content: center; gap: 6px; }
.pz-sticker.bonus { transform: rotate(8deg); border-color: #8fd3ff; box-shadow: 0 6px 0 #bfe6ff; animation-delay: 0s; }
.pz-bonus { display: flex; margin: 0 auto 10px; min-height: 48px; font-size: 17px; background: linear-gradient(135deg, #7fd3ff, #b79bff); }