:root{--font:"Pretendard", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;--bg:#f1f1ec;--panel-bg:#fbfbf8;--card:#fff;--line:#e2e2da;--line-strong:#cfcfc6;--text:#1f2328;--muted:#6b6f76;--accent:#2e529e;--accent-soft:#e8eef9;--glass:#ffffffe0;--shadow:0 6px 24px #141e3224, 0 1px 3px #141e321a;--radius:10px}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font:13px/1.5 var(--font);touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;margin:0;overflow:hidden}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}input,select,textarea{-webkit-user-select:auto;user-select:auto}#app{grid-template-columns:minmax(0,1fr) 360px;height:100dvh;display:grid}#viewport{min-width:0;position:relative;overflow:hidden}#viewport canvas{touch-action:none;display:block}.overlay{pointer-events:none;background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 10px;position:absolute}#status{font-size:13px;top:10px;left:10px}#status .note{color:#b05000}body:not(.dev) #status{border-radius:999px;padding:5px 14px}body:not(.dev) #status .bar{height:2px;margin:3px 0 0}#status .now{background:var(--accent-soft);color:var(--accent);border-radius:999px;margin-left:4px;padding:0 8px;font-size:12px;font-weight:700;display:inline-block}#status .bar{background:var(--line);border-radius:2px;min-width:180px;height:3px;margin:4px 0 1px;display:block;overflow:hidden}#status .bar i{background:var(--accent);height:100%;display:block}#pushInfo{color:#7a4a00;background:#fff8e1f2;border-color:#f0c000;display:none;top:10px;left:50%;transform:translate(-50%)}#graphBox{background:var(--card);border:1px solid var(--line);border-radius:6px;width:100%;height:150px;padding:0;position:static;overflow:hidden}#graph{width:100%;height:100%;display:block}body:not(.dev) .dev-only{display:none!important}#loading{background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--muted);pointer-events:none;border-radius:999px;align-items:center;gap:10px;padding:10px 16px;display:flex;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)}#fpsBadge{font-variant-numeric:tabular-nums;color:var(--muted);border-radius:999px;padding:2px 9px;font-size:11.5px;top:10px;right:10px}#fpsBadge.low{color:#c02020;font-weight:700}#loading.corner{box-shadow:none;padding:5px 12px;font-size:12px;top:40px;left:auto;right:10px;transform:none}#loading.error{color:#b02020}#loading.error .spinner{display:none}.spinner{border:2px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#dock{pointer-events:none;flex-direction:column;align-items:center;gap:6px;max-width:calc(100% - 20px);display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.dock-hint{pointer-events:none;color:var(--text);background:var(--glass);border:1px solid var(--line);text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;padding:3px 12px;font-size:12px}.dock-bar{pointer-events:auto;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;align-items:stretch;gap:10px;padding:6px;display:flex}.dock-group{align-items:center;gap:4px;display:flex}.dock-group+.dock-group{border-left:1px solid var(--line);padding-left:10px}.dock-bar button{color:var(--text);background:0 0;border:none;border-radius:8px;align-items:center;gap:5px;padding:5px 8px;display:inline-flex}.dock-bar button:hover{background:var(--accent-soft)}.dock-bar .icon-row{flex-wrap:nowrap;gap:2px}.dock-bar .icon-row .txt,#btnPlay .txt{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}#btnPlay{background:var(--accent);color:#fff;justify-content:center;width:38px;height:34px}#btnPlay:hover{background:#24437f}#btnPlay.paused{background:#1a7a30}.speed-seg{background:#eeeee8;border-radius:8px;gap:0;margin-left:4px;padding:2px;display:flex}.speed-seg button{color:var(--muted);padding:3px 7px;font-size:12px}.speed-seg button.on{color:var(--text);background:#fff;box-shadow:0 1px 2px #0000001f}.tool-seg{gap:2px;display:flex}.tool-seg button{min-width:52px;color:var(--muted);flex-direction:column;gap:1px;padding:4px 8px;font-size:11.5px}.tool-seg button .ico{color:var(--text)}.tool-seg button.on{background:var(--accent);color:#fff}.tool-seg button.on .ico{color:#fff}.ico{line-height:0;display:inline-flex}#coach{z-index:5;opacity:0;pointer-events:none;color:#fff;box-shadow:var(--shadow);text-align:center;background:#1f2a44;border-radius:12px;max-width:min(420px,100% - 40px);padding:10px 16px;transition:opacity .4s,transform .4s;position:absolute;bottom:130px;left:50%;transform:translate(-50%,8px)}#coach.show{opacity:.95;transform:translate(-50%)}#coach b{font-size:14px;display:block}#coach span{opacity:.8;margin-top:2px;font-size:12px;display:block}#panel{background:var(--panel-bg);border-left:1px solid var(--line);padding:0 14px 28px;overflow-y:auto}#panelHead{z-index:2;background:var(--panel-bg);border-bottom:1px solid var(--line);padding:14px 0 10px;position:sticky;top:0}#panel h1{color:var(--text);letter-spacing:-.2px;margin:0;font-size:18px}#panel h1 .ver{color:var(--accent);background:var(--accent-soft);vertical-align:middle;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:400}#panelHead .sub{color:var(--muted);margin:3px 0 10px;font-size:12.5px}.mode-seg{background:#eeeee8;border-radius:9px;padding:3px;display:flex}.mode-seg button{color:var(--muted);background:0 0;flex:1;padding:5px 0;font-weight:700;border:none!important;border-radius:7px!important;margin:0!important}.mode-seg button.on{box-shadow:0 1px 3px #0000001f;color:var(--text)!important;background:#fff!important}.section{border-bottom:1px solid var(--line);padding:4px 0 10px}.section>summary{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;padding:8px 0 6px;font-size:14px;font-weight:700;list-style:none;display:flex}.section>summary::-webkit-details-marker{display:none}.section>summary:before{content:"";border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);width:6px;height:6px;margin-right:2px;transition:transform .15s;transform:rotate(-45deg)}.section[open]>summary:before{transform:rotate(45deg)}.section .section{border:none;margin-left:4px;padding:0}.section .section>summary{padding:4px 0;font-size:13px}.section-body{flex-direction:column;gap:6px;display:flex}.sub-h{color:var(--muted);margin-top:2px;font-size:11.5px;font-weight:700}h4{color:var(--accent);margin:10px 0 2px;font-size:13px}.hint{color:var(--muted);font-size:12px}.readout{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:12px}.joint-name{margin-top:6px;font-size:12px;font-weight:700}.chips{flex-wrap:wrap;gap:5px;display:flex}.chip{background:var(--card);font-size:12.5px;border-radius:999px!important;padding:4px 11px!important}.chip.on{color:#fff;background:var(--accent)!important;border-color:var(--accent)!important}button{font:inherit;border:1px solid var(--line-strong);background:var(--card);cursor:pointer;color:var(--text);border-radius:7px;padding:5px 10px}button:hover{background:var(--accent-soft)}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.btn-row{flex-wrap:wrap;gap:6px;display:flex}.btn-row button .ico{margin-right:2px}.seg{flex-wrap:wrap;display:flex}.seg button{border-radius:0;flex:1;min-width:0;margin-left:-1px;padding:5px 6px}.seg button:first-child{border-radius:7px 0 0 7px;margin-left:0}.seg button:last-child{border-radius:0 7px 7px 0}.seg button.on{background:var(--accent);color:#fff;border-color:var(--accent)}.dock-bar .seg{flex-wrap:nowrap}.dock-bar .seg button{white-space:nowrap;border-radius:8px;flex:none;margin:0}.slider{grid-template-columns:88px minmax(0,1fr) 112px;align-items:center;gap:6px;display:grid}.slider .lbl{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.slider .val{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-size:12px}.slider input{width:100%;accent-color:var(--accent);margin:0}.checks{grid-template-columns:1fr 1fr;gap:3px 8px;margin-top:4px;display:grid}.check{cursor:pointer;align-items:center;gap:6px;display:flex}.check input{accent-color:var(--accent)}.swatch{border-radius:3px;width:22px;height:10px;display:inline-block}select{font:inherit;border:1px solid var(--line-strong);background:var(--card);width:100%;color:var(--text);border-radius:7px;padding:5px 6px}#hud{pointer-events:none;flex-direction:column;gap:6px;max-width:min(560px,100% - 20px);display:flex;position:absolute;top:10px;left:10px}#hud .overlay{position:static}#status .slow{color:#c02020;font-weight:700}#chars{flex-direction:column;gap:4px;display:flex}#chars .char{background:var(--glass);border:1px solid var(--line);border-left:5px solid #333;border-radius:8px;flex-wrap:wrap;align-items:center;gap:3px 4px;max-width:420px;padding:4px 8px;font-size:12px;line-height:1.7;display:flex}#hud .dim{color:var(--muted);font-size:11.5px;font-weight:400}#chars .tag{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.tag{color:#fff;border-radius:4px;margin:1px 0;padding:0 6px;font-size:11.5px;line-height:1.6;display:inline-block}.tag.beh{background:#0000009e}.tag.bal{background:#c86400d9}.tag.step{background:#1a3a8ae0}.tag.react{background:#b45a14e6}.tag.walk{background:#146e3ce0}.tag.fall{background:#ff7a00e6}.tag.grab{background:#9030c0e6}.tag.air{background:#0096b4e6}.tag.getup{background:#6e28aae6}.tag.wound,.tag.clutch{background:#8a0010e6}.tag.gaze{background:#008cdce6}.tag.impact{color:#202020;background:#f0c000;font-weight:700}.tag-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.name-tag{color:#fff;border-radius:4px;padding:0 6px;font-size:12px;font-weight:700;position:absolute;transform:translate(-50%,-50%)}#assistWarn{color:#fff;text-align:right;background:#c82814eb;border-color:#a01000;font-size:20px;font-weight:700;display:none;top:40px;right:10px}#assistWarn small{font-size:13px;font-weight:400;display:block}#legend{grid-template-columns:1fr 1fr;gap:1px 10px;max-width:300px;font-size:12px;display:grid;bottom:96px;right:10px}#legend .leg{white-space:nowrap;align-items:center;gap:5px;display:flex}#legend .sw{border-radius:2px;width:14px;height:10px;display:inline-block}#legend .sw.dot{border-radius:50%;width:10px}#legend .sw.line,#legend .sw.arrow{height:3px}#matchInfo .ok{color:#1a7a30;font-weight:700}#matchInfo .warn{color:#b05000;font-weight:700}@media (width<=1100px){#app{grid-template-columns:minmax(0,1fr) 320px}.slider{grid-template-columns:76px minmax(0,1fr) 100px}.tool-seg button{min-width:0;padding:6px}.tool-seg button .txt{display:none}.speed-seg button{padding:3px 5px}.dock-bar{gap:6px}.dock-group+.dock-group{padding-left:6px}.dock-hint{max-width:100%}}@media (width<=760px){html,body{height:auto;overflow:visible}#app{grid-template-rows:72vh auto;grid-template-columns:1fr;height:auto}#viewport{height:72vh}.dock-hint,#coach,.speed-seg{display:none!important}#dock{bottom:8px}#panel{border-left:none;border-top:1px solid var(--line);overflow:visible}#panelHead{position:static}#hud{max-width:calc(100% - 20px)}#chars{display:none}.dock-bar{flex-wrap:wrap;justify-content:center;gap:4px;padding:4px}.dock-group+.dock-group{border-left:none;padding-left:0}.tool-seg button{min-width:0;padding:6px}.tool-seg button .txt{display:none}#legend{display:none!important}}