:root{color-scheme:dark;font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:#fff8ed;background:#0b1424;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden}body{background:#0b1424}a{color:inherit}main{width:100%;height:100%;position:relative}.card{height:100%;position:relative;isolation:isolate;overflow:hidden}.brand{position:absolute;inset:0;z-index:-2}.brand-heroes{width:100%;height:100%;display:block;object-fit:cover;object-position:38% center}.card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 25%,#0b142420 43%,#0b1424b8 59%,#0b1424ed 75%,#0b1424 100%)}
.account-content{position:absolute;left:58%;right:6%;top:50%;transform:translateY(-50%);text-align:center}h1{font-size:clamp(48px,6.2vw,100px);font-weight:900;letter-spacing:-.075em;line-height:1.2;margin:0;white-space:nowrap;text-shadow:0 4px 32px #0005}.intro{font-size:clamp(12px,1.4vw,20px);letter-spacing:.08em;color:#d4c9b5;margin:22px 0 0;white-space:nowrap}.social-buttons{display:flex;justify-content:center;gap:22px;margin-top:52px}.social{display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}.social-buttons .social{width:64px;height:64px;padding:0;border-radius:50%;box-shadow:0 8px 24px #0003}.social img{object-fit:contain}.social-buttons .social img{width:28px;height:28px}.google{background:#fff;color:#1f1f1f}.kakao{background:#fee500;color:#191919}button:disabled{opacity:.45;cursor:wait}button:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 8px 32px #d6bb742e}button:active{transform:scale(.95)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e9c982;outline-offset:5px}.status,.note{font-size:12px;line-height:1.7;color:#adbdcc}.status{position:absolute;top:100%;left:0;right:0;margin:22px 0 0}.status:empty,.note:empty{display:none}.status.error{color:#ffb6ad}#login-note{position:absolute;top:100%;margin-top:64px;left:0;right:0}.back{display:none}[hidden]{display:none!important}
/* 계정 관리는 로비의 내 설정에서만 표시한다. */
body.settings-view{overflow:auto;height:auto;min-height:100dvh}.settings-view main{height:auto;max-width:720px;padding:32px 24px;margin:auto}.settings-view .back{display:inline-block;margin-bottom:24px;text-decoration:none;font-size:13px;color:#bdc8d8}.settings-view .card{height:auto;overflow:visible;border:1px solid #ffffff1a;border-radius:24px;background:#132034;padding:36px}.settings-view .brand,.settings-view .card::after{display:none}.settings-view .account-content{position:static;transform:none;text-align:left}.settings-view h1{font-size:32px;letter-spacing:-.04em}.settings-view .intro:empty{display:none}.settings-view .status{position:static;margin:12px 0 20px}.welcome{margin:24px 0;color:#d3bf91}.welcome span{margin-left:6px;font-size:13px}.uploads{border-top:1px solid #ffffff1a;padding-top:22px;margin-top:24px}.uploads h2{font-size:16px;margin:0 0 12px}.uploads .social{width:100%;min-height:48px;border-radius:12px;margin-top:12px;gap:12px;font:inherit;font-size:14px}.uploads .social img{width:22px;height:22px}label{display:block;font-size:13px;margin:18px 0 10px}.name-row{display:flex;gap:10px}input,button{font:inherit}.name-row input{min-width:0;flex:1;background:#0b1424;color:#fff;border:1px solid #50617a;border-radius:10px;padding:12px}.name-row button{border:0;border-radius:10px;background:#e9cc91;color:#152239;padding:12px 20px;cursor:pointer}.toggle{display:flex;align-items:center;gap:10px}.toggle input{width:20px;height:20px;accent-color:#e9cc91}.quiet{display:block;margin:18px auto 0;border:0;background:none;color:#bdc8d8;text-decoration:underline;text-underline-offset:4px;font-size:12px;cursor:pointer;padding:10px}.play{display:block;text-align:center;margin-top:28px;border-radius:12px;background:#e9cc91;color:#14243a;text-decoration:none;font-weight:800;padding:15px}
@media(max-height:500px) and (min-aspect-ratio:1/1){h1{font-size:clamp(38px,7vw,72px)}.intro{margin-top:14px;font-size:12px}.social-buttons{margin-top:28px;gap:18px}.social-buttons .social{width:54px;height:54px}.social-buttons .social img{width:25px;height:25px}}
@media(max-aspect-ratio:4/5){.brand{bottom:22%}.brand-heroes{object-position:28% center}.card::after{background:linear-gradient(180deg,transparent 20%,#0b142425 34%,#0b1424ba 49%,#0b1424f5 66%,#0b1424 82%)}.account-content{left:8%;right:8%;top:auto;bottom:max(12%,env(safe-area-inset-bottom));transform:none}h1{font-size:clamp(46px,12vw,72px)}.intro{font-size:13px;margin-top:16px}.social-buttons{margin-top:30px}.social-buttons .social{width:58px;height:58px}.settings-view main{padding:24px 16px}.settings-view .card{padding:24px}.settings-view .account-content{transform:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* 그림 위로 천천히 떠오르는 작은 마법 입자. 로그인 버튼 아래 레이어. */
.login-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;mask-image:linear-gradient(90deg,#000 35%,#0009 68%,#0003);contain:strict}
.account-content{z-index:1}
.login-mote{position:absolute;width:var(--size);height:var(--size);animation:login-drift var(--duration) linear var(--delay) infinite;opacity:0}
.login-mote::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgb(var(--tint));box-shadow:0 0 7px 2px rgba(var(--tint),.32);animation:login-twinkle var(--twinkle) ease-in-out var(--delay) infinite}
.login-mote.sparkle::after{content:"";position:absolute;inset:-3px;background:rgba(var(--tint),.75);clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);animation:login-twinkle var(--twinkle) ease-in-out var(--delay) infinite}
@keyframes login-drift{0%{transform:translate3d(0,35px,0);opacity:0}18%{opacity:.55}72%{opacity:.4}100%{transform:translate3d(var(--drift),-170px,0);opacity:0}}
@keyframes login-twinkle{0%,100%{opacity:.22;transform:scale(.7)}50%{opacity:.95;transform:scale(1.15)}}
.login-atmosphere.paused .login-mote,.login-atmosphere.paused .login-mote::before,.login-atmosphere.paused .login-mote::after{animation-play-state:paused}
.settings-view .login-atmosphere,.login-complete .login-atmosphere{display:none}
@media(prefers-reduced-motion:reduce){.login-atmosphere{display:none}}

/* Square menu fan art sits on the left; the chosen picture never rotates. */
.brand.login-duo{right:36%;mask-image:linear-gradient(90deg,#000 65%,transparent)}
.login-duo .brand-heroes{object-position:50% center}
@media(max-aspect-ratio:4/5){.brand.login-duo{right:0;mask-image:none}.login-duo .brand-heroes{object-position:50% center}}
.privacy-note{position:absolute;z-index:1;left:58%;right:6%;bottom:max(12px,env(safe-area-inset-bottom));margin:0;text-align:center;font-size:10px;line-height:1.7;color:#a6b2c2}.privacy-note a{text-underline-offset:3px}.settings-view .privacy-note{position:static;margin-top:28px}.login-complete .privacy-note{display:none}
#age-dialog{width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:28px;border:1px solid #ffffff24;border-radius:20px;background:#132034;color:#fff8ed;box-shadow:0 20px 80px #0007;text-align:center}#age-dialog::backdrop{background:#070e1bc9;backdrop-filter:blur(5px)}#age-dialog h2{font-size:21px;margin:0 0 14px;letter-spacing:-.04em}#age-dialog p{font-size:13px;line-height:1.8;color:#bdc8d8;margin:0 0 24px}#age-dialog button{width:100%;border:0;border-radius:10px;padding:12px;font-size:13px;cursor:pointer}.age-continue{background:#e9cc91;color:#14243a;font-weight:700}.age-cancel{background:transparent;color:#bdc8d8;margin-top:8px}
@media(max-height:500px) and (min-aspect-ratio:1/1){.account-content .status{position:static;margin:8px 0}.privacy-note{font-size:9px;bottom:max(8px,env(safe-area-inset-bottom))}}
#age-dialog button,#age-dialog button:hover,#age-dialog button:active{transform:none;transition:none}

@media(max-aspect-ratio:4/5){.privacy-note{left:8%;right:8%}}