#popFull { --pop-full-bg:#0b0d12; --panel:#13161c; --line:#2a2f38; --text:#f3f5f8; --sub:#a3abb8; --mute:#7c8593; --blue:#2f6bff; --blue2:#5b8cff; --mint:#2fd08a; --violet:#8b7bff; --pink:#ff7ac6; --cyan:#4fd8ff; }
#popFull * { box-sizing:border-box;margin:0;padding:0 }
@property --pop-full-angle {syntax:'<angle>';initial-value:0deg;inherits:false}
#popFull .dim { position:fixed;inset:0;background:rgba(5,7,10,.66);backdrop-filter:blur(3px);animation:popFullFade .4s ease both }
#popFull .wrap { position:relative;width:min(1040px,100%);border-radius:24px;padding:1.5px; animation:popFullPop .75s cubic-bezier(.2,.9,.25,1.08) both }
#popFull .wrap::before { content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px; background:conic-gradient(from var(--pop-full-angle),#2f6bff,#8b7bff,#ff7ac6,#4fd8ff,#2fd08a,#2f6bff); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; animation:popFullSpin 6s linear infinite }
#popFull .wrap::after { content:"";position:absolute;inset:-2px;border-radius:26px;z-index:-1;filter:blur(28px);opacity:.45; background:conic-gradient(from var(--pop-full-angle),#2f6bff,#8b7bff,#ff7ac6,#4fd8ff,#2fd08a,#2f6bff);animation:popFullSpin 6s linear infinite }
@keyframes popFullSpin {to{--pop-full-angle:360deg}}
@keyframes popFullPop {0%{opacity:0;transform:translateY(26px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes popFullFade {from{opacity:0}to{opacity:1}}
#popFull .popup { position:relative;display:grid;grid-template-columns:540px minmax(0,1fr);background:var(--panel); border-radius:22.5px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6) }
#popFull .popup:focus { outline:none; }
#popFull .visual { position:relative;min-width:0;min-height:680px;padding:46px 26px 28px;display:flex;flex-direction:column;align-items:center; background:#0f1530;overflow:hidden;isolation:isolate }
#popFull .blob { position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;z-index:-2 }
#popFull .b1 { width:420px;height:420px;left:-120px;top:-140px;background:#2f5bff;animation:popFullDrift1 13s ease-in-out infinite }
#popFull .b2 { width:360px;height:360px;right:-140px;top:120px;background:#8b5cff;animation:popFullDrift2 15s ease-in-out infinite }
#popFull .b3 { width:320px;height:320px;left:40px;bottom:-160px;background:#ff5fb7;opacity:.45;animation:popFullDrift3 17s ease-in-out infinite }
#popFull .b4 { width:240px;height:240px;right:20px;bottom:-60px;background:#28d0ff;opacity:.4;animation:popFullDrift1 11s ease-in-out infinite reverse }
@keyframes popFullDrift1 {50%{transform:translate(90px,70px) scale(1.15)}}
@keyframes popFullDrift2 {50%{transform:translate(-80px,-60px) scale(.9)}}
@keyframes popFullDrift3 {50%{transform:translate(120px,-50px) scale(1.2)}}
#popFull .grid { position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:30px 30px;mask-image:radial-gradient(75% 65% at 50% 48%,#000 25%,transparent 80%);animation:popFullGridMove 20s linear infinite }
@keyframes popFullGridMove {to{background-position:30px 30px,30px 30px}}
#popFull #popFullFx { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4 }
#popFull .step { position:relative;z-index:2;display:flex;align-items:center;gap:10px;margin-bottom:22px;height:30px }
#popFull .step .num { font-size:12px;font-weight:800;color:#fff;padding:5px 11px;border-radius:999px;letter-spacing:.03em; background:linear-gradient(90deg,rgba(91,140,255,.55),rgba(139,123,255,.55));border:1px solid rgba(255,255,255,.25) }
#popFull .step .cap { font-size:16px;font-weight:700;color:#fff;letter-spacing:-.02em;text-shadow:0 2px 12px rgba(80,120,255,.6) }
#popFull .step.swap .num { animation:popFullCapIn .5s cubic-bezier(.2,.9,.3,1.3) both }
#popFull .step.swap .cap { animation:popFullCapIn .5s .08s cubic-bezier(.2,.9,.3,1.3) both }
@keyframes popFullCapIn {from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
#popFull .stage { position:relative;z-index:2;width:100%;perspective:1200px }
#popFull .window { position:relative;width:100%;border-radius:14px;overflow:hidden;background:#0c0f14; box-shadow:0 30px 70px rgba(4,8,30,.7),0 0 0 1px rgba(255,255,255,.16),0 0 40px rgba(91,140,255,.35); transform:rotateX(var(--rx,4deg)) rotateY(var(--ry,-5deg));transition:transform .4s ease-out,box-shadow .4s;will-change:transform }
#popFull .window.glow { box-shadow:0 30px 70px rgba(4,8,30,.7),0 0 0 1.5px rgba(126,224,208,.75),0 0 60px rgba(126,200,255,.55) }
#popFull .window.morph { animation:popFullMorph 1.2s cubic-bezier(.2,.8,.2,1) }
@keyframes popFullMorph {0%{scale:1;filter:none}28%{scale:1.025;filter:brightness(1.12) saturate(1.08)}100%{scale:1;filter:none}}
#popFull .bloom { position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen; background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.55),rgba(170,205,255,.28) 30%,rgba(140,120,255,.12) 50%,transparent 70%) }
#popFull .bloom.go { animation:popFullBloom 1.3s ease-out }
@keyframes popFullBloom {0%{opacity:0;transform:scale(.5)}30%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
#popFull .sweep2 { position:absolute;inset:0;pointer-events:none;opacity:0; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.0) 40%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 60%,transparent 65%);background-size:300% 100% }
#popFull .sweep2.go { animation:popFullSweep2 1.1s .15s cubic-bezier(.4,0,.2,1) }
@keyframes popFullSweep2 {0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-20% 0}}
#popFull .bar { height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#1b1f27;border-bottom:1px solid #262b35 }
#popFull .bar i { width:9px;height:9px;border-radius:50% }
#popFull .bar i:nth-child(1) { background:#ff6058 }
#popFull .bar i:nth-child(2) { background:#ffbd2e }
#popFull .bar i:nth-child(3) { background:#28c940 }
#popFull .bar span { margin-left:10px;font-size:11px;color:#8a93a3 }
#popFull .screens { position:relative;height:330px;background:#1d2128;transition:height .5s ease }
#popFull .screens video { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.04);filter:blur(6px); transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .6s }
#popFull .screens video.on { opacity:1;transform:none;filter:none }
#popFull .shine { position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%); background-size:260% 100%;animation:popFullSweep 6s ease-in-out infinite }
@keyframes popFullSweep {0%,72%{background-position:130% 0}100%{background-position:-30% 0}}
#popFull .ring { position:absolute;inset:0;border-radius:14px;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(126,224,208,.8),inset 0 0 40px rgba(126,200,255,.35);opacity:0 }
#popFull .ring.go { animation:popFullRing 1.4s ease-out }
@keyframes popFullRing {0%{opacity:0}25%{opacity:1}100%{opacity:0}}
#popFull .chip { position:absolute;z-index:5;left:50%;bottom:-20px;translate:-50% 0;display:flex;align-items:center;gap:9px;padding:9px 16px 9px 10px;border-radius:999px; background:rgba(16,20,28,.9);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 34px rgba(0,0,0,.45); font-size:13px;font-weight:700;color:#e9eefc;white-space:nowrap;transition:background .3s,border-color .3s }
#popFull .chip .dot { position:relative;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue2),var(--violet)) }
#popFull .chip .dot::after { content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:#9fb7ff;animation:popFullRot 1s linear infinite }
@keyframes popFullRot {to{transform:rotate(360deg)}}
#popFull .chip .dot svg { width:12px;height:12px }
#popFull .chip .dots3 i { display:inline-block;width:3px;height:3px;margin-left:2px;border-radius:50%;background:#c9d4ff;animation:popFullBounce 1.2s infinite }
#popFull .chip .dots3 i:nth-child(2) { animation-delay:.15s }
#popFull .chip .dots3 i:nth-child(3) { animation-delay:.3s }
@keyframes popFullBounce {0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
#popFull .chip.done { border-color:rgba(47,208,138,.6);animation:popFullChipPop .5s cubic-bezier(.2,.9,.3,1.5) }
#popFull .chip.done .dot { background:var(--mint) }
#popFull .chip.done .dot::after { display:none }
#popFull .chip.done .dots3 { display:none }
@keyframes popFullChipPop {40%{transform:scale(1.12)}}
#popFull .nav { position:relative;z-index:2;margin-top:auto;padding-top:34px;display:flex;align-items:center;gap:16px }
#popFull .nav button { width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s }
#popFull .nav button:hover { background:rgba(255,255,255,.2);transform:scale(1.08) }
#popFull .dots { display:flex;gap:8px }
#popFull .dots b { position:relative;width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.28);cursor:pointer;overflow:hidden;transition:width .35s }
#popFull .dots b.on { width:34px }
#popFull .dots b i { position:absolute;inset:0;width:0;background:#fff;border-radius:inherit }
#popFull .copy { position:relative;min-width:0;padding:52px 42px 24px;display:flex;flex-direction:column;overflow:hidden }
#popFull .copy::before { content:"";position:absolute;width:300px;height:300px;right:-120px;top:-120px;border-radius:50%; background:radial-gradient(circle,rgba(91,140,255,.22),transparent 70%);animation:popFullGlow 6s ease-in-out infinite }
@keyframes popFullGlow {50%{transform:scale(1.25);opacity:.6}}
#popFull .close { position:absolute;z-index:6;top:18px;right:18px;width:36px;height:36px;border-radius:50%;border:0;background:#2a2e36;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .3s }
#popFull .close:hover { background:#383d47;transform:rotate(90deg) }
#popFull .in { opacity:0;animation:popFullUp .7s cubic-bezier(.2,.8,.2,1) forwards }
@keyframes popFullUp {from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
#popFull .badge { position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;overflow:hidden; background:linear-gradient(90deg,#2fd08a,#4fd8c8);color:#06281a;font-size:12.5px;font-weight:800;letter-spacing:-.01em;box-shadow:0 0 22px rgba(47,208,138,.45) }
#popFull .badge::after { content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-120%);animation:popFullBtnSheen 3.5s ease-in-out 1s infinite }
#popFull .badge svg { width:13px;height:13px;animation:popFullTwinkle 2s ease-in-out infinite }
@keyframes popFullTwinkle {50%{transform:rotate(90deg) scale(1.3)}}
#popFull h1 { position:relative;margin-top:18px;font-size:32px;line-height:1.3;font-weight:800;letter-spacing:-.035em }
#popFull h1 .ch { display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);filter:blur(6px);animation:popFullChIn .6s cubic-bezier(.2,.9,.3,1.2) forwards }
@keyframes popFullChIn {to{opacity:1;transform:none;filter:none}}
#popFull h1 em { font-style:normal }
#popFull h1 em .ch { background:linear-gradient(90deg,#8fb0ff,#c9a8ff,#ff9ad5,#7ee0d0,#8fb0ff);background-size:600% 100%; -webkit-background-clip:text;background-clip:text;color:transparent;animation:popFullChIn .6s cubic-bezier(.2,.9,.3,1.2) forwards,popFullFlow 6s linear infinite }
@keyframes popFullFlow {to{background-position:600% 0}}
#popFull .spark { position:absolute;width:16px;height:16px;color:#ffd86b;animation:popFullSpk 2.4s ease-in-out infinite;filter:drop-shadow(0 0 6px #ffd86b) }
#popFull .spark.s1 { right:4px;top:-8px }
#popFull .spark.s2 { right:-12px;top:34px;width:10px;height:10px;animation-delay:.8s;color:#9fd8ff;filter:drop-shadow(0 0 6px #9fd8ff) }
@keyframes popFullSpk {0%,100%{transform:scale(0) rotate(0);opacity:0}50%{transform:scale(1) rotate(90deg);opacity:1}}
#popFull .desc { margin-top:14px;font-size:15px;line-height:1.65;color:var(--sub);letter-spacing:-.01em }
#popFull .feats { margin-top:24px;display:flex;flex-direction:column;gap:8px }
#popFull .feat { position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border-radius:12px; border:1px solid transparent;cursor:pointer;transition:background .3s,border-color .3s,transform .3s;overflow:hidden }
#popFull .feat:hover { background:#1a1e25;transform:translateX(3px) }
#popFull .feat.on { background:linear-gradient(90deg,#1c2540,#1a1f2c);border-color:#34477a;box-shadow:0 8px 24px rgba(47,107,255,.15) }
#popFull .feat .ic { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#232833;color:#9fb3ff;transition:background .3s,color .3s,transform .4s }
#popFull .feat.on .ic { background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;transform:rotate(-8deg) scale(1.06);box-shadow:0 6px 18px rgba(91,110,255,.5) }
#popFull .feat .ic svg { width:17px;height:17px }
#popFull .feat strong { display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em }
#popFull .feat .ex { display:block;margin-top:3px;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
#popFull .feat.on .ex { color:#c4d0ee }
#popFull .feat .ex .cur { display:inline-block;width:1.5px;height:12px;margin-left:1px;background:#9fb7ff;vertical-align:-1px;animation:popFullBlink 1s steps(1) infinite }
@keyframes popFullBlink {50%{opacity:0}}
#popFull .feat .prog { position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--blue2),var(--violet),var(--pink));box-shadow:0 0 10px var(--violet) }
#popFull .btns { margin:22px 0 26px;display:flex;flex-direction:column;gap:10px }
#popFull .btn { position:relative;height:52px;border-radius:12px;font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;overflow:hidden;letter-spacing:-.01em; display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,box-shadow .3s }
#popFull .btn:active { transform:scale(.985) }
#popFull .btn.pri { border:0;color:#fff;background:linear-gradient(90deg,#2f6bff,#6b5cff,#2f6bff);background-size:200% 100%;animation:popFullBgMove 4s linear infinite,popFullPulse 2.6s ease-in-out infinite }
@keyframes popFullBgMove {to{background-position:200% 0}}
@keyframes popFullPulse {0%,100%{box-shadow:0 0 0 0 rgba(91,110,255,.5)}50%{box-shadow:0 0 0 8px rgba(91,110,255,0),0 10px 30px rgba(91,110,255,.45)}}
#popFull .btn.pri::after { content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%);animation:popFullBtnSheen 3.6s ease-in-out 1.6s infinite }
@keyframes popFullBtnSheen {0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
#popFull .btn.pri svg { transition:transform .25s }
#popFull .btn.pri:hover svg { transform:translateX(4px) }
#popFull .btn.sec { background:transparent;color:#fff;border:1px solid #3a3f49 }
#popFull .btn.sec:hover { background:#1b1f26 }
#popFull .btn svg { width:16px;height:16px }
#popFull .foot { margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:center }
#popFull .foot button { border:0;background:none;font:inherit;font-size:13.5px;color:var(--sub);cursor:pointer;padding:4px 6px;border-radius:6px;transition:color .2s }
#popFull .foot button:hover { color:#fff }
#popFull .wrap.out { animation:popFullPopOut .35s ease forwards }
#popFull .dim.out { animation:popFullFadeOut .35s ease forwards }
@keyframes popFullPopOut {to{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes popFullFadeOut {to{opacity:0}}
@media (max-width:900px) {
#popFull .popup { grid-template-columns:minmax(0,1fr) }
#popFull .visual { min-height:auto;padding:34px 14px 22px }
#popFull .window { transform:none!important }
#popFull .copy { padding:30px 20px 20px }
#popFull h1 { font-size:25px }
#popFull .chip { font-size:12px }
#popFull .step { align-self:flex-start;margin-left:2px }
#popFull .step .cap { font-size:14.5px }
#popFull .close { top:12px;right:12px }
}
@media (prefers-reduced-motion:reduce) {
#popFull *, #popFull *::before, #popFull *::after { animation:none!important;transition:none!important }
#popFull .in, #popFull h1 .ch { opacity:1;transform:none;filter:none }
}
#popFull { position:fixed; inset:0; z-index:22000; display:none; place-items:center; align-items:safe center; padding:24px 16px; overflow:auto; font-family:Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; color:var(--text); -webkit-font-smoothing:antialiased; }
#popFull.show { display:grid; }
#popFull .wrap { z-index:1; }
#popFull button { font-family:inherit; }
#popFull a { text-decoration:none; }
#popFull h1 { color:var(--text); }
#popFull .feat:focus-visible, #popFull .dots b:focus-visible { outline:2px solid var(--blue2); outline-offset:3px; }
#popFull .dots b { display:block; }