@import "https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;700;900&display=swap";:root{--c-bg-0:#0a2463;--c-bg-1:#12389a;--c-panel:#1c5ad6;--c-panel-2:#2c78f2;--c-slot:#52aeff;--c-slot-2:#8ad0ff;--c-line:#081c52;--c-line-hi:#a6ddff;--c-text:#fff;--c-text-dim:#c2dcff;--c-text-ink:#0f2350;--c-primary:#ff9f1c;--c-primary-2:#ff6a00;--c-yellow:#ffd23f;--c-success:#2bd47d;--c-danger:#ff4d6d;--c-cop:#2453ff;--c-cop-2:#9db6ff;--c-thief:#ff4d4d;--c-thief-2:#ffb3b3;--c-scrim:#040e2c9e;--f-display:"Jua", "Noto Sans KR", system-ui, sans-serif;--f-body:"Noto Sans KR", system-ui, sans-serif;--fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-lg:20px;--fs-xl:24px;--fs-2xl:32px;--fs-3xl:44px;--r-xs:6px;--r-sm:10px;--r-md:16px;--r-lg:24px;--r-pill:999px;--bw:3px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--tap:44px;--topbar-h:56px;--sh-1:0 3px 0 var(--c-line);--sh-2:0 5px 0 var(--c-line), 0 8px 18px #00000040;--sh-3:0 8px 0 var(--c-line), 0 18px 40px #0006;--hi:inset 0 2px 0 #ffffff73;--lo:inset 0 -3px 0 #0000002e;--ease-pop:cubic-bezier(.34, 1.56, .64, 1);--t-fast:.12s;--t-med:.22s}*{box-sizing:border-box}body{background:var(--c-bg-0);color:var(--c-text);font:var(--fs-md)/1.45 var(--f-body);margin:0}.game-text{font-family:var(--f-display);color:#fff;paint-order:stroke fill;-webkit-text-stroke:4px var(--c-line);text-shadow:0 3px 0 var(--c-line);letter-spacing:.02em}.panel{background:linear-gradient(180deg, var(--c-panel-2), var(--c-panel) 40%);border:var(--bw) solid var(--c-line);border-radius:var(--r-md);box-shadow:var(--sh-2), var(--hi);padding:var(--sp-3)}.panel-head{font-family:var(--f-display);font-size:var(--fs-lg);background:var(--c-bg-1);border:var(--bw) solid var(--c-line);border-radius:var(--r-pill);padding:2px var(--sp-4);align-items:center;gap:var(--sp-2);box-shadow:var(--hi);margin:calc(-1 * var(--sp-5)) 0 var(--sp-2);display:inline-flex}.inset{border-radius:var(--r-sm);padding:var(--sp-2);background:#081c5273;box-shadow:inset 0 3px #00000040}.btn{--b1:var(--c-panel-2);--b2:var(--c-panel);font:var(--fs-lg) var(--f-display);color:#fff;min-height:var(--tap);padding:0 var(--sp-5);border:var(--bw) solid var(--c-line);border-radius:var(--r-sm);cursor:pointer;background:linear-gradient(180deg, var(--b1), var(--b2));box-shadow:var(--sh-1), var(--hi), var(--lo);justify-content:center;align-items:center;gap:var(--sp-2);white-space:nowrap;text-shadow:0 2px #00000040;transition:transform var(--t-fast), box-shadow var(--t-fast);flex:none;display:inline-flex}.btn:hover{filter:brightness(1.08)}.btn:active{box-shadow:0 0 0 var(--c-line), var(--hi);transform:translateY(3px)}.btn:focus-visible{outline:3px solid var(--c-yellow);outline-offset:2px}.btn:disabled{filter:grayscale(.8)brightness(.8);cursor:not-allowed;transform:none}.btn img{width:28px;height:28px}.btn-primary{--b1:#ffc04d;--b2:var(--c-primary-2)}.btn-success{--b1:#6af0a8;--b2:#17a75e}.btn-danger{--b1:#ff8095;--b2:#e0284b}.btn-light{--b1:#fff;--b2:#cfe8ff;color:var(--c-text-ink);text-shadow:none}.btn-xl{font-size:var(--fs-2xl);border-radius:var(--r-md);min-height:72px;padding:0 var(--sp-6)}.btn-sm{font-size:var(--fs-sm);min-height:32px;padding:0 var(--sp-3)}.btn-icon{width:var(--tap);border-radius:var(--r-pill);padding:0}.tabs{gap:var(--sp-1);background:var(--c-bg-1);border:var(--bw) solid var(--c-line);border-radius:var(--r-pill);padding:3px;display:flex}.tab{font:var(--fs-md) var(--f-display);color:var(--c-text-dim);border-radius:var(--r-pill);min-height:36px;padding:0 var(--sp-3);cursor:pointer;white-space:nowrap;background:0 0;border:0;flex:1;justify-content:center;align-items:center;gap:6px;display:inline-flex}.tab img{width:22px;height:22px}.tab[aria-selected=true]{color:#fff;background:linear-gradient(180deg, var(--c-slot-2), var(--c-slot));box-shadow:var(--hi), 0 2px 0 var(--c-line);text-shadow:0 1px 0 var(--c-line)}.slot{background:linear-gradient(180deg, var(--c-slot-2), var(--c-slot));border:var(--bw) solid var(--c-line);border-radius:var(--r-sm);box-shadow:var(--sh-1), var(--hi);aspect-ratio:1;place-items:center;display:grid;position:relative;overflow:hidden}.slot.is-empty{background:#52aeff59;box-shadow:inset 0 3px #0003}.slot.is-closed{background:repeating-linear-gradient(45deg,#0f2e7a 0 8px,#12389a 8px 16px)}.slot.is-selected{outline:4px solid var(--c-yellow);outline-offset:-1px}.slot .badge{width:24px;height:24px;position:absolute;top:4px;left:4px}.slot .name{background:var(--c-line);font-size:var(--fs-xs);text-align:center;white-space:nowrap;text-overflow:ellipsis;padding:2px 4px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.slot.is-ready .name{background:var(--c-success);color:var(--c-text-ink);font-weight:700}.chip{font:var(--fs-md) var(--f-display);background:var(--c-line);border-radius:var(--r-pill);padding:2px var(--sp-3) 2px 4px;align-items:center;gap:4px;display:inline-flex;box-shadow:inset 0 0 0 2px #ffffff26}.chip img{width:24px;height:24px}.chip-cop{background:var(--c-cop)}.chip-thief{background:var(--c-thief)}.input{font:var(--fs-md) var(--f-body);color:var(--c-text-ink);border:var(--bw) solid var(--c-line);border-radius:var(--r-sm);min-height:var(--tap);padding:0 var(--sp-3);background:#fff;width:100%;box-shadow:inset 0 3px #0000001f}.input:focus{outline:3px solid var(--c-yellow)}.scrim{background:var(--c-scrim);z-index:50;padding:var(--sp-4);place-items:center;display:grid;position:absolute;inset:0}.dialog{background:linear-gradient(180deg, var(--c-panel-2), var(--c-panel) 30%);border:var(--bw) solid var(--c-line);border-radius:var(--r-lg);width:min(480px,100%);max-height:100%;box-shadow:var(--sh-3), var(--hi);padding:var(--sp-5);animation:pop var(--t-med) var(--ease-pop);position:relative;overflow:auto}.dialog-title{text-align:center;font-size:var(--fs-2xl);margin:calc(-1 * var(--sp-2)) 0 var(--sp-4)}.dialog-close{position:absolute;top:-14px;right:-14px}@keyframes pop{0%{opacity:0;transform:scale(.85)}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.check{appearance:none;cursor:pointer;border:var(--bw) solid var(--c-line);border-radius:var(--r-sm);width:32px;height:32px;transition:transform var(--t-fast) var(--ease-pop);background:#fff;flex:none;place-items:center;margin:0;display:inline-grid;box-shadow:inset 0 3px #0000001f}.check:after{content:"";width:14px;height:8px;transition:transform var(--t-fast) var(--ease-pop);border-bottom:4px solid #fff;border-left:4px solid #fff;transform:translateY(-2px)rotate(-45deg)scale(0)}.check:checked{box-shadow:var(--hi), 0 2px 0 var(--c-line);background:linear-gradient(#6af0a8,#17a75e)}.check:checked:after{transform:translateY(-2px)rotate(-45deg)scale(1)}.check:active{transform:scale(.92)}.check:focus-visible{outline:3px solid var(--c-yellow);outline-offset:2px}.tag{font:700 var(--fs-xs)/1 var(--f-body);border-radius:var(--r-pill);white-space:nowrap;align-items:center;padding:4px 8px;display:inline-flex}.tag-req{background:var(--c-danger);color:#fff}.tag-opt{background:var(--c-bg-1);color:var(--c-text-dim)}.agree-list{gap:var(--sp-2);display:grid}.agree-row{align-items:center;gap:var(--sp-3);min-height:56px;padding:var(--sp-2) var(--sp-3);cursor:pointer;border-radius:var(--r-sm);transition:border-color var(--t-fast), background var(--t-fast);background:#081c5259;border:2px solid #0000;display:flex}.agree-row:hover{background:#081c5280}.agree-row:has(.check:checked){border-color:var(--c-success);background:#2bd47d24}.agree-row .txt{min-width:0;font-size:var(--fs-md);flex:1;line-height:1.35}.agree-row .txt small{color:var(--c-text-dim);font-size:var(--fs-xs);margin-top:2px;display:block}.agree-row.all{min-height:64px;font:var(--fs-lg) var(--f-display);background:var(--c-bg-1);border:var(--bw) solid var(--c-line);box-shadow:var(--hi)}.agree-row.all:has(.check:checked){border-color:var(--c-line);background:linear-gradient(#2bd47d,#179e5c)}.text-link{font:inherit;color:var(--c-yellow);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;min-height:32px;padding:4px 2px;text-decoration:underline}.text-link.dim{color:var(--c-text-dim)}.notice{gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-sm);font-size:var(--fs-sm);border:2px solid var(--c-line-hi);background:#081c5273;align-items:flex-start;line-height:1.5;display:flex}.notice img{flex:none;width:28px;height:28px}.notice.warn{border-color:var(--c-danger);background:#ff4d6d24}.doc-scroll{color:var(--c-text-ink);border:var(--bw) solid var(--c-line);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);overscroll-behavior:contain;font:15px/1.75 var(--f-body);word-break:keep-all;overflow-wrap:anywhere;scroll-padding-top:var(--sp-4);scrollbar-width:thin;scrollbar-color:var(--c-panel) #e6eef9;background:#fff;overflow-y:auto;box-shadow:inset 0 3px #00000014}.doc-scroll>:first-child{margin-top:0}.doc-scroll h1{font:var(--fs-xl)/1.3 var(--f-display);color:var(--c-bg-0);margin:0 0 var(--sp-2)}.doc-scroll h2{font:var(--fs-lg)/1.35 var(--f-display);color:var(--c-bg-0);margin:var(--sp-5) 0 var(--sp-2);border-left:6px solid var(--c-panel);border-radius:0 var(--r-sm) var(--r-sm) 0;scroll-margin-top:var(--sp-3);background:#eaf4ff;padding:6px 12px}.doc-scroll h3{font:var(--fs-md) var(--f-display);color:var(--c-panel);margin:var(--sp-4) 0 var(--sp-1)}.doc-scroll p{margin:0 0 var(--sp-2)}.doc-scroll ol,.doc-scroll ul{margin:0 0 var(--sp-3);padding-left:1.5em}.doc-scroll li{margin:2px 0}.doc-scroll li::marker{color:var(--c-panel);font-weight:700}.doc-scroll strong{background:linear-gradient(#0000 58%,#ffe27a 58%);font-weight:700}.doc-scroll .meta{font-size:var(--fs-xs);color:#4b5a7a;border-radius:var(--r-pill);margin-bottom:var(--sp-3);background:#f1f4fa;padding:2px 10px;display:inline-block}.doc-scroll .table-wrap{margin:0 0 var(--sp-3);border-radius:var(--r-sm);border:2px solid #d5deec;overflow-x:auto}.doc-scroll table{border-collapse:collapse;width:100%;min-width:520px;font-size:13px;line-height:1.55}.doc-scroll th{text-align:left;background:#eaf4ff;font-weight:700}.doc-scroll th,.doc-scroll td{vertical-align:top;border-bottom:1px solid #e1e8f3;padding:8px 10px}.doc-toc{scrollbar-width:none;gap:6px;padding-bottom:4px;display:flex;overflow-x:auto}.doc-toc a{font:var(--fs-sm) var(--f-display);color:#fff;background:var(--c-bg-1);border:2px solid var(--c-line);border-radius:var(--r-pill);flex:none;padding:4px 12px;text-decoration:none}.doc-toc a:hover{background:var(--c-panel-2)}@media (width<=640px){.doc-scroll{padding:var(--sp-3) var(--sp-4);font-size:15px}}.page-bg{background:radial-gradient(120% 80% at 50% 0%, var(--c-bg-1), var(--c-bg-0));min-height:100dvh;position:relative}.page-bg:before{content:"";pointer-events:none;opacity:.08;background:radial-gradient(circle at 20px 20px,#fff 3px,#0000 4px) 0 0/48px 48px;position:fixed;inset:0}.page-head{z-index:5;height:var(--topbar-h);align-items:center;gap:var(--sp-3);padding:0 var(--sp-4);border-bottom:var(--bw) solid var(--c-line);background:linear-gradient(#081c52f2,#081c52bf);display:flex;position:sticky;top:0}.page-head img.lockup{width:auto;height:36px}.page-head .title{font:var(--fs-xl) var(--f-display);flex:1}.page-doc{max-width:820px;padding:var(--sp-4);gap:var(--sp-3);grid-template-columns:minmax(0,1fr);margin:0 auto;display:grid}.page-doc .doc-scroll{max-height:none;overflow:visible}.page-center{min-height:100dvh;padding:var(--sp-4);place-items:center;display:grid}.page-center>.panel{text-align:center;gap:var(--sp-3);width:min(480px,100%);padding:var(--sp-5);justify-items:center;display:grid}.hero-icon{filter:drop-shadow(0 6px #081c5266);width:96px;height:96px}dialog.dialog{border:var(--bw) solid var(--c-line);border-radius:var(--r-lg);padding:var(--sp-5);color:var(--c-text);background:linear-gradient(180deg, var(--c-panel-2), var(--c-panel) 30%);width:min(480px,100vw - 32px);max-height:calc(100dvh - 32px);box-shadow:var(--sh-3), var(--hi);overflow:visible}dialog.dialog[open]{animation:pop var(--t-med) var(--ease-pop);gap:var(--sp-3);flex-direction:column;display:flex}dialog.dialog::backdrop{background:var(--c-scrim)}dialog.dialog.wide{width:min(760px,100vw - 32px)}dialog.dialog .doc-scroll{flex:1;min-height:200px;max-height:60dvh}dialog.dialog .dialog-close{position:absolute;top:-14px;right:-14px}@media (width<=640px){dialog.dialog{border-radius:var(--r-lg) var(--r-lg) 0 0;width:100vw;max-width:100vw;max-height:92dvh;padding:var(--sp-4);margin:auto 0 0}dialog.dialog .dialog-close{top:10px;right:10px}dialog.dialog .doc-scroll{max-height:none}}.loadbar{border-radius:var(--r-pill);background:var(--c-line);border:var(--bw) solid var(--c-line);width:min(320px,80%);height:18px;box-shadow:var(--hi);overflow:hidden}.loadbar>i{border-radius:var(--r-pill);background:linear-gradient(180deg, #ffe27a, var(--c-yellow));height:100%;width:var(--p,30%);transition:width var(--t-med);display:block}.loadbar.indeterminate>i{width:40%;animation:1.2s ease-in-out infinite slide}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}.code-box{font:var(--fs-xl) var(--f-display);letter-spacing:.12em;text-align:center;color:var(--c-text-ink);border:var(--bw) solid var(--c-line);border-radius:var(--r-sm);-webkit-user-select:all;user-select:all;background:#fff;width:100%;padding:8px 12px;box-shadow:inset 0 3px #0000001a}input.code-box{min-height:var(--tap);text-transform:uppercase}input.code-box:focus{outline:3px solid var(--c-yellow)}main{padding:calc(var(--topbar-h) + var(--sp-2)) var(--sp-4) var(--sp-4);min-height:100dvh}.topbar{height:var(--topbar-h);justify-content:flex-end;align-items:center;gap:var(--sp-2);padding:0 var(--sp-4);z-index:10;display:flex;position:fixed;inset:0 0 auto}.center{align-items:center;gap:var(--sp-3);text-align:center;flex-direction:column;max-width:480px;margin:0 auto;display:flex}.chat{height:240px;color:var(--c-text-ink);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-4);background:#fff;overflow-y:auto}.game{inset:var(--topbar-h) 0 0 0;position:fixed}dialog::backdrop{background:var(--c-scrim)}button.link{color:var(--c-yellow);cursor:pointer;font:inherit;background:0 0;border:none;padding:0;text-decoration:underline}button.danger{color:var(--c-danger)}.deco{gap:var(--sp-4);grid-template-columns:minmax(240px,380px) 1fr;max-width:1100px;margin:0 auto;display:grid}.deco-preview{place-items:center;display:grid}.deco-ava{width:100%;max-height:380px}.deco-editor{gap:var(--sp-3);flex-direction:column;min-width:0;display:flex}.deco-nick{gap:var(--sp-1);font-family:var(--f-display);flex-direction:column;display:flex}.nick-status{min-height:1.4em;font-size:var(--fs-sm);margin:0}.nick-status.error{color:var(--c-danger)}.nick-status.ok{color:var(--c-success)}.tabs.sub .tab{font-size:var(--fs-sm)}.deco-grid{gap:var(--sp-2);grid-template-columns:repeat(auto-fill,minmax(88px,1fr));align-content:start;min-height:200px;display:grid}.deco-grid .slot{aspect-ratio:1;padding:var(--sp-1);cursor:pointer;overflow:hidden}.deco-grid .slot svg{width:100%;height:100%}.swatch{aspect-ratio:1;border:var(--bw) solid var(--c-line);border-radius:var(--r-pill);cursor:pointer;min-height:var(--tap)}.swatch.is-selected{outline:4px solid var(--c-yellow);outline-offset:2px}@media (width<=720px){.deco{grid-template-columns:1fr}.deco-ava{max-height:210px}}.row-2{gap:var(--sp-2);grid-template-columns:1fr 1fr;width:100%;display:grid}.field{gap:var(--sp-1);margin-bottom:var(--sp-3);display:grid}.logo{display:block}.logo img{height:auto;margin:0 auto;display:block}@media (orientation:landscape) and (height<=500px){.logo img{height:44px;width:auto!important}}.splash{gap:var(--sp-5)}.consent{gap:var(--sp-4);width:min(520px,100%);display:grid}.consent-links{align-items:center;gap:var(--sp-2);color:var(--c-text-dim);font-size:var(--fs-sm);flex-direction:column;margin:0;display:flex}
