:root{--bg: #e8edf1;--card: #ffffff;--ink: #1d3247;--ink-2: #5a6b7d;--line: #c9d3dd;--blue: #2f7ad1;--blue-press: #2463ad;--warn: #c2462e;--ok: #2f8a5a;--yellow: #f3d36b;--f-display: "Gowun Batang", "Nanum Myeongjo", serif;--f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;--f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.mono{font-family:var(--f-mono)}.muted{color:var(--ink-2)}.screen{min-height:100%;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.center{display:grid;place-items:center}.gate{position:relative;display:grid;place-items:center;background:radial-gradient(120% 80% at 50% 0%,#f6f8fa 0%,var(--bg) 60%,#dbe2e8 100%)}.ffu{position:fixed;inset:0 0 auto;height:22px;background:repeating-linear-gradient(90deg,transparent 0 calc(16.66% - 1px),var(--line) calc(16.66% - 1px) 16.66%),linear-gradient(#fbfcfd,#eef2f5);border-bottom:1px solid var(--line)}.gate-card{width:min(400px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 22px 20px;background:#ffffffdb;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px -24px #1d324759;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.gate-card h1{margin:4px 0 0;font-family:var(--f-display);font-size:clamp(1.45rem,6vw,1.7rem);text-align:center;text-wrap:balance;line-height:1.3}.gate-card>p{margin:0;text-align:center}.door{width:64px;height:64px;border:2px solid var(--ink-2);border-radius:6px;display:grid;grid-template-columns:1fr 1fr;background:#f7f9fb}.door span{margin:8px 6px 26px;border-radius:3px;background:#bcd6e8}.door span:first-child{border-right:0}.field{position:relative;width:100%;display:flex;flex-direction:column;gap:4px;margin-top:6px}.field-label{font-size:.78rem;color:var(--ink-2);font-weight:500}.field input{width:100%;height:46px;padding:0 56px 0 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:500 16px/1 var(--f-body)}.field input:focus{outline:none;border-color:var(--blue)}.count{position:absolute;right:12px;bottom:15px;font-size:.72rem;color:var(--ink-2)}.code{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;width:100%;margin-top:4px}.cell{aspect-ratio:4 / 5;max-width:100%;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:8px;background:#fff}.cell.filled{border-color:var(--ink)}.cell.cursor{border-color:var(--blue);box-shadow:0 0 0 3px #2f7ad126}.cell i{width:10px;height:10px;border-radius:50%;background:var(--ink)}.shake{animation:shake .42s}@keyframes shake{20%,60%{transform:translate(-7px)}40%,80%{transform:translate(7px)}}.msg{min-height:1.4em;font-size:.86rem;color:var(--ink-2)}.msg.error{color:var(--warn)}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.keypad button{height:52px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:1.25rem;font-weight:500;font-variant-numeric:tabular-nums;transition:background .12s,transform .08s}.keypad button:active:not(:disabled){background:#eef3f8;transform:scale(.97)}.keypad button.small{font-size:.95rem}.keypad button.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}.keypad button.primary:active:not(:disabled){background:var(--blue-press)}.keypad button:disabled{opacity:.45}.foot{font-size:.74rem;margin-top:2px}.eyebrow{margin:0;font-size:.7rem;letter-spacing:.14em;color:var(--ink-2)}.avatar-stage{position:relative;width:100%;display:grid;place-items:center;padding:26px 0 10px;border-radius:14px;background:repeating-linear-gradient(0deg,transparent 0 15px,#e3e9ee 15px 16px),repeating-linear-gradient(90deg,transparent 0 15px,#e3e9ee 15px 16px),#f2f5f8}.nametag,.nametag3d{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:.8rem;font-weight:500;white-space:nowrap}.nametag{position:absolute;top:8px}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:.82rem}.swatch.on{border-color:var(--blue);box-shadow:0 0 0 3px #2f7ad126}.chip{width:26px;height:26px;border-radius:50%;border:2px solid}.cta{width:100%;height:52px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-weight:600;font-size:1rem;margin-top:4px}.cta:active{background:var(--blue-press)}.airshower{position:relative;display:grid;place-items:center;align-content:center;gap:18px;overflow:hidden;background:linear-gradient(#f7f9fb,#dfe6ec)}.shower-figure{animation:wobble .5s ease-in-out infinite alternate}@keyframes wobble{0%{transform:rotate(-2deg)}to{transform:rotate(2deg)}}.shower-text{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink-2)}.shower-text .mono{font-size:.72rem;letter-spacing:.2em;color:var(--blue)}.nozzles{position:absolute;top:0;bottom:0;width:50%}.nozzles.left{left:0}.nozzles.right{right:0;transform:scaleX(-1)}.nozzles i{position:absolute;left:-40%;width:70%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(47,122,209,.55),transparent);animation:gust .55s linear infinite}@keyframes gust{0%{transform:translate(0);opacity:0}30%{opacity:1}to{transform:translate(140%);opacity:0}}.world{position:fixed;inset:0}.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));pointer-events:none}.hud>*{pointer-events:auto}.hud-chip,.hud-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:#ffffffe6;border:1px solid var(--line);font-size:.88rem}.badge{font-style:normal;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--yellow);color:var(--ink)}.stage{position:absolute;inset:0;touch-action:none;cursor:grab}.stage:active{cursor:grabbing}.hud{flex-wrap:nowrap}.hud-place{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:.86rem;font-weight:600;pointer-events:none}.hud-place .mono{font-size:.72rem;opacity:.7;font-weight:500;margin-right:4px}.minimap{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + 48px);right:max(12px,env(safe-area-inset-right));width:clamp(120px,22vw,210px);padding:6px;border:1px solid var(--line);border-radius:12px;background:#ffffffeb}.map-svg{display:block;width:100%;height:auto;font-family:var(--f-body)}.map-cell.pick{cursor:pointer}.map-cell.pick:hover rect{stroke:var(--blue);stroke-width:.8}.map-modal{position:absolute;inset:0;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#1d324759;z-index:20}.map-sheet{width:min(720px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:#fff}.map-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.map-head .muted{flex:1;font-size:.85rem;min-width:0}.joystick{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:max(26px,env(safe-area-inset-bottom));width:128px;height:128px;border-radius:50%;background:#ffffff8c;border:1.5px solid rgba(29,50,71,.25);display:grid;place-items:center;touch-action:none;z-index:5}.knob{width:54px;height:54px;border-radius:50%;background:var(--ink);box-shadow:0 4px 12px #1d32474d;pointer-events:none}.hint{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(560px,calc(100% - 32px));padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#fffffff0;font-size:.88rem;line-height:1.55;text-align:left}@media(pointer:coarse){.hint{bottom:calc(max(26px,env(safe-area-inset-bottom)) + 140px)}}@media(prefers-reduced-motion:reduce){.shower-figure,.nozzles i,.shake{animation:none}}.viewer{position:absolute;inset:0;z-index:30;display:grid;grid-template-rows:auto 1fr;background:#0a121cf0;color:#fff;touch-action:pan-y;animation:fadein .18s ease-out}@keyframes fadein{0%{opacity:0}to{opacity:1}}.viewer-head{display:flex;align-items:center;gap:12px;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}.viewer-head strong{font-size:1rem}.viewer-head .mono{font-size:.8rem;opacity:.7;flex:1}.viewer-close{height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:#ffffff14;color:#fff}.viewer-body{min-height:0;display:grid;place-items:center;padding:8px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.viewer-body img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px #00000080;-webkit-user-select:none;user-select:none}.viewer-nav{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:#ffffff1a;display:grid;place-items:center}.viewer-nav svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.viewer-nav.prev{left:max(10px,env(safe-area-inset-left))}.viewer-nav.next{right:max(10px,env(safe-area-inset-right))}@media(pointer:coarse){.viewer-nav{width:44px;height:44px;margin-top:-22px}}.hud-right{display:inline-flex;gap:8px}.hud-btn.icon{width:38px;padding:0;justify-content:center;color:var(--ink-2)}.hud-btn.icon.on{color:var(--blue)}.online{position:absolute;left:max(12px,env(safe-area-inset-left));top:calc(max(12px,env(safe-area-inset-top)) + 48px);display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#ffffffe6;border:1px solid var(--line);font-size:.8rem;font-variant-numeric:tabular-nums;pointer-events:none}.online .dot{width:8px;height:8px;border-radius:50%;background:#b5c1cd}.online .dot.on{background:#3fbf74}@media(max-width:420px){.hud-chip{padding:0 10px;max-width:28vw;overflow:hidden}.hud-chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-place{padding:7px 10px}}.hud-btn,.hud-chip{white-space:nowrap;flex-shrink:0}@media(max-width:420px){.hud{gap:6px}.hud-btn{padding:0 11px}.hud-right{gap:6px}}.viewer-loading{color:#ffffffb3;font-size:.9rem}.viewer-body{overflow:hidden}.viewer-body img{width:auto;height:auto;max-height:calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.update-bar{position:fixed;left:50%;top:calc(max(12px,env(safe-area-inset-top)) + 96px);transform:translate(-50%);z-index:40;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:.88rem;white-space:nowrap;box-shadow:0 8px 24px #1d32474d}.update-bar button{height:32px;padding:0 14px;border:0;border-radius:999px;background:var(--yellow);color:var(--ink);font-weight:600}