@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
:root{color-scheme:dark;font-family:'Noto Sans KR',sans-serif;color:#f3f5fa;background:#05060a}*{box-sizing:border-box}body{margin:0;min-width:320px;overflow:hidden}button,input{font:inherit}
#space{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 55% 115%,#151927 0,#080a11 42%,#040509 77%)}#space::before{content:'';position:absolute;inset:-15%;background:radial-gradient(ellipse at 8% 44%,#1b264066,transparent 32%),radial-gradient(ellipse at 92% 20%,#1c1b344d,transparent 30%);filter:blur(40px);animation:nebula 22s ease-in-out infinite alternate}.stars{position:absolute;inset:0;opacity:.58;background-image:radial-gradient(circle,#dfe7ff 0 1px,transparent 1.2px),radial-gradient(circle,#8794b5 0 .6px,transparent .8px);background-size:113px 107px,71px 67px;background-position:17px 31px,43px 7px;mask-image:linear-gradient(to bottom,#000,transparent 94%);animation:stars 90s linear infinite}
#travelers{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}.traveler{position:absolute;top:var(--flight-y);left:0;opacity:0;filter:drop-shadow(0 12px 18px #000b);will-change:transform,opacity;animation:fly-right var(--flight-time) linear forwards}.traveler.reverse{left:auto;right:0;animation-name:fly-left}.traveler.spacewalker{animation-timing-function:cubic-bezier(.36,.02,.64,.98)}
@keyframes fly-right{0%{opacity:0;transform:translate3d(-140px,0,0) scale(var(--flight-scale)) rotate(-12deg)}8%,90%{opacity:.62}48%{transform:translate3d(52vw,calc(var(--flight-drift)*.45),0) scale(var(--flight-scale)) rotate(9deg)}100%{opacity:0;transform:translate3d(calc(100vw + 140px),var(--flight-drift),0) scale(var(--flight-scale)) rotate(-5deg)}}
@keyframes fly-left{0%{opacity:0;transform:translate3d(140px,0,0) scale(var(--flight-scale)) rotate(12deg) scaleX(-1)}8%,90%{opacity:.62}48%{transform:translate3d(-52vw,calc(var(--flight-drift)*.45),0) scale(var(--flight-scale)) rotate(-9deg) scaleX(-1)}100%{opacity:0;transform:translate3d(calc(-100vw - 140px),var(--flight-drift),0) scale(var(--flight-scale)) rotate(5deg) scaleX(-1)}}
.craft{position:relative;width:78px;height:26px;border:1px solid #aebbd044;border-radius:55% 58% 44% 48%;background:linear-gradient(180deg,#8995a533,#303744b8 55%,#10141de8);box-shadow:inset 0 2px 3px #eaf4ff1f,0 0 18px #8fb6ed1a}.craft::before{content:'';position:absolute;left:17px;top:-17px;width:37px;height:21px;border:1px solid #b7c9e74a;border-bottom:0;border-radius:50% 50% 15% 15%;background:radial-gradient(circle at 35% 30%,#dbeaff55,#35445f66 48%,#111722dd);box-shadow:inset 3px 3px 7px #fff1}.craft::after{content:'';position:absolute;left:8px;right:8px;bottom:-4px;height:7px;border-radius:50%;background:#080b11;box-shadow:0 5px 12px #6185c82b}.craft .dome{position:absolute;z-index:2;left:35px;top:-9px;width:4px;height:4px;border-radius:50%;background:#d8e9ff;box-shadow:0 0 7px #a9ceff}.craft .engine{position:absolute;left:-12px;top:8px;width:15px;height:10px;border-radius:70% 10% 10% 70%;background:linear-gradient(90deg,transparent,#7aa7e477);filter:blur(2px);animation:engine-pulse .5s ease-in-out infinite alternate}.craft .porthole{position:absolute;right:16px;top:8px;width:7px;height:7px;border:1px solid #bdc9d844;border-radius:50%;background:#8db9ec44;box-shadow:0 0 5px #8db9ec55}@keyframes engine-pulse{to{scale:1.35 .8;opacity:.5}}
.astronaut{position:relative;width:44px;height:65px;animation:astronaut-roll 7s ease-in-out infinite}.astronaut i{position:absolute;display:block}.helmet{z-index:3;left:9px;top:0;width:27px;height:27px;border:2px solid #aab4c4;border-radius:48%;background:radial-gradient(circle at 35% 30%,#d7e6f455,#273244 45%,#090d15 75%);box-shadow:inset 2px 2px 5px #fff3,0 0 10px #8fa9cf21}.suit{z-index:2;left:11px;top:24px;width:25px;height:27px;border-radius:7px 7px 9px 9px;background:linear-gradient(120deg,#bdc4cc,#667080);box-shadow:inset -5px -3px 7px #1e2634aa}.suit::after{content:'';position:absolute;left:7px;top:7px;width:11px;height:7px;border-radius:2px;background:#252d39;box-shadow:inset 0 2px #91aac1}.pack{z-index:1;left:5px;top:25px;width:12px;height:26px;border-radius:4px;background:#3b4554}.arm{z-index:1;top:27px;width:9px;height:29px;border-radius:6px;background:#7a8492;transform-origin:50% 3px}.arm-a{left:6px;rotate:35deg}.arm-b{right:3px;rotate:-48deg}.leg{top:47px;width:10px;height:22px;border-radius:5px;background:#6c7582;transform-origin:50% 2px}.leg-a{left:12px;rotate:15deg}.leg-b{right:8px;rotate:-17deg}@keyframes astronaut-roll{0%,100%{transform:rotate(-12deg) translateY(-5px)}50%{transform:rotate(14deg) translateY(7px)}}
@keyframes nebula{to{transform:translate3d(5%,-2%,0) scale(1.08)}}@keyframes stars{to{background-position:130px 138px,114px 74px}}
header{position:relative;z-index:20;height:78px;padding:0 4.5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0b}.logo{color:#eef1f7;text-decoration:none;display:flex;gap:12px;align-items:center;font:600 13px 'Space Grotesk';letter-spacing:2.2px}.logo>i{width:29px;height:29px;border:1px solid #d8e8ff55;border-radius:50%;background:radial-gradient(circle at 33% 25%,#fff 0 3%,#a9c9ff44 7%,transparent 50%);box-shadow:inset -5px -7px 12px #65799c20,0 0 16px #a4c8ff13;animation:breathe 4s ease-in-out infinite}.connection{display:flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #ffffff10;border-radius:20px;color:#777f91;font-size:10px}.connection i{width:5px;height:5px;border-radius:50%;background:#6d5962}.connection.online i{background:#75b899;box-shadow:0 0 8px #75b899}
.intro{position:relative;z-index:3;width:min(500px,84vw);margin:9vh auto 0;text-align:center;pointer-events:none;transition:opacity .55s,transform .7s,filter .55s}.has-bubbles .intro{opacity:0;transform:scale(.88) translateY(26px);filter:blur(14px);visibility:hidden}.overline{font:500 9px 'Space Grotesk';letter-spacing:3px;color:#646b7c}.intro h1{margin:20px 0;font-size:clamp(42px,5.3vw,72px);letter-spacing:-4px;line-height:1.02;font-weight:600}.intro h1 em{font-style:normal;color:#9ba9c6}.intro>p:not(.overline){color:#777e8d;font-size:13px;line-height:1.9}.actions{display:flex;justify-content:center;gap:8px;margin-top:20px}.actions button{pointer-events:auto;border:1px solid #d8e4f933;border-radius:30px;color:#e5e9f0;background:#c9d9f00d;padding:11px 18px 11px 12px;cursor:pointer;transition:.25s}.actions button:hover{border-color:#d8e4f966;background:#d7e6ff18;transform:translateY(-2px)}.actions button span{display:inline-grid;place-items:center;width:25px;height:25px;margin-right:7px;border-radius:50%;background:#dce7fa14}.intro small{display:block;margin-top:12px;color:#454b58;font-size:9px}
#universe{position:absolute;z-index:6;inset:78px 0 44px;pointer-events:none}.bubble{--size:clamp(112px,12vw,164px);position:absolute;left:0;top:0;width:var(--size);height:var(--size);pointer-events:auto;touch-action:none;user-select:none;will-change:transform,opacity;transition:opacity .3s,scale .3s;cursor:grab}.bubble.dragging{cursor:grabbing;z-index:50}.bubble.arriving{opacity:0;scale:.1}.bubble-shell{position:absolute;inset:0;border:1px solid #e7f1ff3d;border-radius:50%;color:#e8edf5;background:radial-gradient(circle at 31% 23%,#ffffffd9 0 1.3%,#dbeaff44 2.2%,transparent 8%),radial-gradient(circle at 66% 74%,#90a9d018,transparent 28%),#a4bfe607;box-shadow:inset 8px 10px 20px #f2f7ff10,inset -13px -17px 25px #60779d0e,0 0 24px #9cbbeb0c,0 22px 42px #0009;backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:breathe 4.8s ease-in-out infinite}.bubble:nth-child(3n+2) .bubble-shell{animation-delay:-1.8s;animation-duration:5.6s}.bubble:nth-child(3n) .bubble-shell{animation-delay:-3.2s;animation-duration:4.2s}.bubble-shell::before{content:'';position:absolute;inset:8%;border-radius:50%;border-top:1px solid #ffffff25;transform:rotate(-35deg)}.bubble:hover .bubble-shell,.bubble.dragging .bubble-shell{filter:brightness(1.34);border-color:#e9f3ff80;box-shadow:inset 8px 10px 20px #fff2,inset -13px -17px 25px #8ca8d31a,0 0 38px #9cbbeb27,0 25px 46px #000a}.glint{position:absolute;width:17%;height:7%;border-radius:50%;background:#fff7;top:17%;left:27%;rotate:-30deg;filter:blur(.5px)}.bubble .icon{color:#b5c0d2;font-size:18px;margin-bottom:7px}.bubble strong{width:72%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:11px;font-weight:500}.bubble small{margin-top:3px;color:#7f8797;font:500 9px 'Space Grotesk'}.bubble .receive{position:absolute;bottom:18%;color:#9ca6b8;font-size:8px;opacity:0;transition:opacity .2s}.bubble.remote:hover .receive{opacity:1}.bubble.own .receive{display:none}.life{--life:100%;position:absolute;bottom:8%;width:26%;height:1px;background:linear-gradient(90deg,#77859d var(--life),#ffffff0c 0);opacity:.4}
@keyframes breathe{0%,100%{transform:scale(.98);filter:brightness(.95)}50%{transform:scale(1.025);filter:brightness(1.08)}}
.bubble.popping{pointer-events:none;z-index:70;animation:vanish .6s cubic-bezier(.2,.8,.2,1) forwards}.bubble.popping .bubble-shell{animation:burst .6s ease-out forwards}.bubble.popping::before,.bubble.popping::after{content:'';position:absolute;inset:28%;border:1px solid #dce9ff88;border-radius:50%;animation:ring .55s ease-out forwards}.bubble.popping::after{animation-delay:.06s}.bubble.reason-received::before{border-color:#bcebd9aa}.bubble.reason-expired::before{border-color:#a4a8b588}@keyframes burst{0%{transform:scale(1)}55%{transform:scale(1.16);opacity:.9}72%{transform:scale(.96);opacity:.75}100%{transform:scale(1.45);opacity:0;filter:blur(5px)}}@keyframes ring{to{inset:-30%;opacity:0;border-width:0}}@keyframes vanish{70%{opacity:1}to{opacity:0}}
#transfers{position:fixed;z-index:80;right:22px;bottom:54px;width:min(320px,calc(100vw - 44px));display:grid;gap:7px}.transfer{padding:12px 14px;border:1px solid #ffffff13;border-radius:12px;background:#0d1018e8;box-shadow:0 12px 30px #000a;backdrop-filter:blur(15px);animation:slide-in .35s ease-out;transition:opacity .24s,transform .24s}.transfer.closing{opacity:0;transform:translateX(18px) scale(.96);pointer-events:none}.transfer header{height:auto;padding:0;border:0;font-size:9px;color:#737b8b;display:grid;grid-template-columns:auto 1fr 20px;gap:8px}.transfer-state{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-transfer{width:20px;height:20px;margin:-6px -7px -5px 0;padding:0;border:0;border-radius:50%;background:transparent;color:#636c7d;line-height:19px;cursor:pointer;transition:.2s}.close-transfer:hover{color:#dbe4f2;background:#ffffff0d}.transfer p{margin:6px 0;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress{height:2px;background:#ffffff0d}.progress i{display:block;height:100%;background:#91a7c8;transition:width .15s}@keyframes slide-in{from{opacity:0;transform:translateX(20px)}}
#toast{position:fixed;z-index:90;left:50%;bottom:65px;translate:-50% 20px;padding:9px 15px;border:1px solid #ffffff15;border-radius:30px;background:#111520e8;color:#9fa8b8;font-size:10px;opacity:0;pointer-events:none;transition:.3s;backdrop-filter:blur(10px)}#toast.show{opacity:1;translate:-50% 0}
footer{position:absolute;z-index:10;height:44px;left:4.5vw;right:4.5vw;bottom:0;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff09;color:#424856;font-size:9px}#drop-zone{display:none;position:fixed;z-index:100;inset:10px;border:1px dashed #b7cae777;border-radius:24px;background:#05070ce8;backdrop-filter:blur(12px);place-items:center}.dragging-files #drop-zone{display:grid}.drop-bubble{width:180px;height:180px;border-radius:50%;border:1px solid #e7f1ff55;display:grid;place-content:center;justify-items:center;background:radial-gradient(circle at 30% 22%,#fff,transparent 5%),#a4bfe60a;box-shadow:inset 10px 15px 30px #fff1,0 0 50px #9bbcff18;animation:breathe 2s ease-in-out infinite alternate}.drop-bubble b{font-size:30px;font-weight:400}.drop-bubble span{font-size:12px;color:#9ba4b4;margin-top:8px}
.login-layer{position:fixed;z-index:200;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#121827,#05060af5 55%);backdrop-filter:blur(24px);opacity:0;visibility:hidden;transition:.5s}.login-layer.visible{opacity:1;visibility:visible}.login-card{width:min(360px,calc(100vw - 40px));padding:34px 32px 30px;border:1px solid #ffffff12;border-radius:24px;background:#0d1018bb;box-shadow:0 30px 80px #000c;text-align:center}.login-orb{height:64px;display:grid;place-items:center}.login-orb i{display:block;width:54px;height:54px;border:1px solid #d8e8ff55;border-radius:50%;background:radial-gradient(circle at 32% 24%,#fff 0 2%,#bad5ff3b 5%,transparent 55%);box-shadow:inset -8px -10px 16px #7c94bb15,0 0 30px #a8c9ff1c;animation:breathe 3s ease-in-out infinite}.login-card h2{margin:10px 0 25px;font-size:25px;line-height:1.35;font-weight:500;letter-spacing:-1.3px}.login-card label{display:block;text-align:left;margin-top:11px}.login-card label span{display:block;margin:0 0 6px 4px;color:#697182;font-size:9px}.login-card input{width:100%;border:1px solid #ffffff12;border-radius:12px;outline:0;background:#080a11;color:#e9edf4;padding:12px 14px;font-size:13px;transition:.2s}.login-card input:focus{border-color:#9db3d34f;box-shadow:0 0 0 3px #9db3d30b}.login-card>button{width:100%;margin-top:12px;border:1px solid #d4e1f333;border-radius:12px;background:#cadbf018;color:#e9eef5;padding:12px 15px;cursor:pointer;display:flex;justify-content:space-between}.login-card>button:hover{background:#cadbf024}.login-card>button:disabled{opacity:.5}.login-card>small{display:block;margin-top:14px;color:#4e5562;font-size:8px;line-height:1.6}#login-error{height:15px;margin:7px 2px 0;text-align:left;color:#b77e89;font-size:9px}.locked>header,.locked>#intro,.locked>#universe,.locked>footer{filter:blur(8px);pointer-events:none}
@media(max-width:700px){body{overflow:auto}.intro{margin-top:6vh}.intro h1{letter-spacing:-2.5px}#universe{inset:78px 0 44px}.bubble{--size:108px}.bubble strong{font-size:9px}footer span:first-child{display:none}footer{justify-content:center}.login-card{padding:28px 24px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}