:root{color:#243b36;font-synthesis:none;background:#f4f3ec;font-family:Noto Sans KR,sans-serif}*{box-sizing:border-box}body{margin:0}header{border-bottom:1px solid #dce1d6;align-items:center;gap:38px;height:88px;padding:0 5vw;display:flex}.brand{letter-spacing:-2px;color:#254237;font-size:32px;font-weight:800;text-decoration:none}.brand span{font-weight:400}.brand i{color:#dca65b;margin-left:4px;font-size:12px}.tag,.eyebrow{letter-spacing:2px;color:#6a7d69;font-size:11px;font-weight:700}#connection{background:#e4e9dd;border-radius:30px;margin-left:auto;padding:9px 15px;font-size:12px}main{max-width:1510px;margin:auto;padding:42px 5vw 24px}.intro{margin-bottom:30px}h1{letter-spacing:-1.7px;margin:10px 0 12px;font-size:36px}p{color:#748078;margin:8px 0;font-size:13px;line-height:1.9}.workspace{grid-template-columns:minmax(0,1fr) 282px;gap:24px;display:grid}.viewport{background:#dbe5d4;border:1px solid #cbd8c3;border-radius:18px;height:540px;position:relative;overflow:hidden}canvas{outline:none;width:100%;height:100%;display:block}.scene-top,.scene-bottom{pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;left:24px;right:24px}.scene-top{font-size:13px;font-weight:600;top:22px}.pill{letter-spacing:1px;border:1px solid #8a9e82;border-radius:20px;padding:5px 9px;font-size:9px}.scene-bottom{background:#f7f7eddd;border-radius:10px;justify-content:center;gap:25px;padding:13px;font-size:10px;bottom:20px}aside{flex-direction:column;gap:16px;display:flex}.panel{background:#fffef9;border:1px solid #e0e4d8;border-radius:14px;padding:21px}.panel-title{justify-content:space-between;margin-bottom:18px;font-size:13px;font-weight:700;display:flex}.panel-title span{color:#8a987f;font-size:11px}.player{align-items:center;gap:10px;margin:14px 0;font-size:12px;display:flex}.player i{border-radius:50%;width:10px;height:10px}.player small{color:#819076;margin-left:auto}.empty{color:#acb5a7}.empty i{background:#e3e8df}h2{margin:10px 0 16px;font-size:20px}.health{background:#e9eddf;border-radius:4px;height:6px;overflow:hidden}#hp{background:#6d9877;width:0;height:100%;transition:width .2s}#stats{font-size:11px;font-weight:600}#effect{font-size:11px}.note{padding:7px 8px}.note>span{font-size:12px;font-weight:700}.note p{font-size:12px}.note small{color:#8b9885;font-size:10px}footer{color:#82907b;justify-content:space-between;gap:16px;margin-top:22px;font-size:10px;display:flex}.dot{background:#7d9b70;border-radius:50%;width:6px;height:6px;margin-right:6px;display:inline-block}button{cursor:pointer;color:#fff;background:#254237;border:0;border-radius:6px;padding:8px 16px}@media (width<=950px){.workspace{grid-template-columns:1fr}.viewport{height:480px}aside{grid-template-columns:1fr 1fr;display:grid}.note{grid-column:1/-1}header .tag{display:none}footer{flex-wrap:wrap}}@media (width<=550px){main{padding-top:28px}h1{font-size:27px}aside{grid-template-columns:1fr}.viewport{height:390px}.scene-bottom{gap:12px;font-size:8px}.intro p{font-size:12px}}.mobile-only{display:none}.mobile-game,.mobile-game body,.mobile-game #app{background:#182b29;width:100%;height:100%;margin:0;overflow:hidden}.mobile-game body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:fixed;inset:0}.mobile-game header,.mobile-game .intro,.mobile-game aside,.mobile-game footer,.mobile-game .scene-top,.mobile-game .scene-bottom{display:none}.mobile-game main,.mobile-game .workspace,.mobile-game .viewport{width:100%;max-width:none;height:100%;margin:0;padding:0;display:block}.mobile-game .viewport{background:#dbe5d4;border:0;border-radius:0;height:100dvh}.mobile-game canvas{touch-action:none;width:100%;height:100%}.mobile-game .mobile-only{display:flex}#mobile-osd{z-index:3;pointer-events:none;color:#f8f7ed;text-shadow:0 1px 4px #183027aa;position:absolute;inset:0}.osd-brand{top:max(14px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#183c34a8;border:1px solid #ffffff38;border-radius:12px;align-items:center;gap:12px;padding:8px 12px;display:flex;position:absolute}.osd-brand b{letter-spacing:-1px;font-size:18px}.osd-brand span{letter-spacing:1.2px;color:#d7e4ce;font-size:9px}.osd-player{top:max(14px,env(safe-area-inset-top));text-align:center;width:min(220px,29vw);position:absolute;left:50%;transform:translate(-50%)}.osd-player>span{letter-spacing:.8px;margin-bottom:5px;font-size:10px;font-weight:700;display:block}.osd-health{background:#102d28aa;border:1px solid #fff5;border-radius:6px;height:7px;overflow:hidden;box-shadow:0 2px 8px #112a25aa}.osd-health i{background:linear-gradient(90deg,#88be7b,#d9e782);width:0;height:100%;transition:width .2s;display:block}.osd-player small{letter-spacing:.7px;font-size:9px;font-weight:700}.osd-server{top:max(14px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#183c34a8;border:1px solid #ffffff38;border-radius:12px;align-items:center;gap:9px;padding:7px 8px 7px 12px;display:flex;position:absolute}.osd-server span{font-size:9px}.osd-server small{border-left:1px solid #ffffff42;padding-left:9px;font-size:9px}.osd-server button{background:#ffffff16;border:1px solid #ffffff35;border-radius:8px;width:30px;height:28px;padding:0;font-size:17px}.osd-effect{top:max(69px,calc(env(safe-area-inset-top) + 55px));white-space:nowrap;background:#17332da8;border-radius:20px;padding:6px 12px;font-size:9px;position:absolute;left:50%;transform:translate(-50%)}.joystick{left:max(28px,calc(env(safe-area-inset-left) + 18px));bottom:max(24px,calc(env(safe-area-inset-bottom) + 18px));pointer-events:auto;touch-action:none;background:radial-gradient(circle,#ffffff12 0 34%,#183e36a8 35% 100%);border:1px solid #ffffff42;border-radius:50%;width:118px;height:118px;position:absolute;box-shadow:inset 0 0 25px #102c2788,0 8px 28px #102b2666}.joystick:before,.joystick:after{content:"";background:#ffffff24;position:absolute}.joystick:before{width:1px;top:14px;bottom:14px;left:50%}.joystick:after{height:1px;top:50%;left:14px;right:14px}#joystick-knob{z-index:2;background:linear-gradient(145deg,#93ad88dd,#547969ee);border:1px solid #ffffff75;border-radius:50%;width:54px;height:54px;margin:-27px;transition:transform 60ms linear;position:absolute;top:50%;left:50%;box-shadow:0 5px 15px #0e2925aa}.attack-button{right:max(32px,calc(env(safe-area-inset-right) + 22px));bottom:max(28px,calc(env(safe-area-inset-bottom) + 22px));pointer-events:auto;touch-action:none;color:#fff8e8;text-shadow:0 2px 5px #542b26;background:linear-gradient(145deg,#c77a58e8,#8d4c3dea);border:2px solid #fff1d580;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:94px;height:94px;padding:0;transition:transform 80ms,filter 80ms;display:flex;position:absolute;box-shadow:inset 0 0 18px #ffe8c42b,0 8px 28px #421f1d66}.attack-button span{font-size:29px;line-height:30px}.attack-button small{letter-spacing:1.5px;font-size:8px;font-weight:800}.attack-button.active{filter:brightness(1.3);transform:scale(.9)}.mobile-retry{z-index:5;pointer-events:auto;background:#31584d;position:absolute;bottom:28px;left:50%;transform:translate(-50%)}@media (orientation:portrait){.mobile-game .osd-brand{left:max(12px,env(safe-area-inset-left));padding:7px 10px}.mobile-game .osd-brand span{display:none}.mobile-game .osd-player{top:max(13px,env(safe-area-inset-top));width:38vw}.mobile-game .osd-server{right:max(12px,env(safe-area-inset-right));padding-left:8px}.mobile-game .osd-server>span{display:none}.mobile-game .osd-effect{top:max(62px,calc(env(safe-area-inset-top) + 50px));text-overflow:ellipsis;max-width:76vw;overflow:hidden}.mobile-game .joystick{left:max(18px,calc(env(safe-area-inset-left) + 12px));bottom:max(25px,calc(env(safe-area-inset-bottom) + 16px));width:112px;height:112px}.mobile-game .attack-button{right:max(20px,calc(env(safe-area-inset-right) + 14px));bottom:max(32px,calc(env(safe-area-inset-bottom) + 22px));width:88px;height:88px}}@media (height<=420px){.joystick{width:102px;height:102px}.attack-button{width:82px;height:82px}.attack-button span{font-size:25px}.osd-brand,.osd-server{top:max(8px,env(safe-area-inset-top))}.osd-player{top:max(9px,env(safe-area-inset-top))}.osd-effect{top:max(57px,calc(env(safe-area-inset-top) + 48px))}}