/* index.html loads this after cockpit.css; standalone keymap uses shared tokens. */
/* 키맵 본문을 펼친 하단 탭에만 공간을 준다. 접기/다른 탭은 저장된 도크 높이로 돌아간다. */
.dock-zone.dock-bottom:has(.dock-body.active .cockpit-keymap-root:not([hidden]) .cockpit-keymap-body:not([hidden])){height:min(440px,60vh)!important;min-height:min(420px,60vh)!important}
.cockpit-keymap-root{display:flex;flex-direction:column;min-height:0;height:100%;color:var(--ink);font-size:var(--fs-2);padding:var(--sp-3);box-sizing:border-box}
.cockpit-keymap-root[hidden],.cockpit-keymap-body[hidden],.cockpit-keymap-enable[hidden]{display:none}
.cockpit-keymap-header{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);flex:none}
.cockpit-teleop-keymap-slot .cockpit-keymap-header{padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-3);background:var(--card2)}
.cockpit-keymap-profile,.cockpit-keymap-enable,.cockpit-keymap-collapse{min-height:32px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--card);color:var(--ink);font:inherit;padding:var(--sp-2) var(--sp-4)}
.cockpit-keymap-profile{min-width:140px;max-width:100%;flex:1}
.cockpit-keymap-enable,.cockpit-keymap-collapse{cursor:pointer}
.cockpit-keymap-enable[aria-pressed=true]{border-color:var(--accent);background:var(--surface)}
.cockpit-keymap-enable:disabled{opacity:.55;cursor:default}
.cockpit-keymap-status{flex:none;margin:var(--sp-2) 0;color:var(--ink2);overflow-wrap:anywhere;line-height:1.4}
.cockpit-keymap-body{min-height:0;overflow:auto;overscroll-behavior:contain;container-type:inline-size}
.cockpit-keymap-content{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);align-items:start}
.cockpit-keymap-description,.cockpit-keymap-source,.cockpit-keymap-guide{margin:var(--sp-2) 0;line-height:1.4;overflow-wrap:anywhere}
.cockpit-keymap-details{margin-top:var(--sp-3);font-size:var(--fs-1);color:var(--ink2)}
.cockpit-keymap-details-heading{cursor:pointer;padding:var(--sp-2) 0;color:var(--dim)}
.cockpit-keymap-details-heading:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cockpit-keymap-source,.cockpit-keymap-guide{color:var(--dim);font-size:var(--fs-1)}
.cockpit-keymap-scroll{max-width:100%;overflow-x:auto;padding:var(--sp-2);border-radius:var(--r-3);background:var(--bg-0);container-type:inline-size}
/* quarter-u grid: 18.5u × 6.5u. 최소 42px/u로 작은 사이드바에서도 글자를 줄이지 않고 스크롤한다. */
.cockpit-keymap-keyboard{--cockpit-keymap-unit:clamp(42px,2.8vw,54px);display:grid;grid-template-columns:repeat(74,calc(var(--cockpit-keymap-unit)/4));grid-template-rows:repeat(26,calc(var(--cockpit-keymap-unit)/4));width:calc(var(--cockpit-keymap-unit)*18.5);height:calc(var(--cockpit-keymap-unit)*6.5);isolation:isolate}
@supports(width:1cqw){.cockpit-keymap-keyboard{--cockpit-keymap-unit:clamp(42px,5.4054cqw,54px)}}
/* 720px 높이 하단 도크: 카메라 공간을 늘 침범하지 않고 마지막 Space/방향키 행까지 표시한다.
 * 팝아웃/미니멀은 위의 42~54px/u 크기를 유지한다. 긴 설명은 계속 읽을 수 있게 줄바꿈한다. */
.dock-zone.dock-bottom .dock-body.active .cockpit-keymap-keyboard{--cockpit-keymap-unit:42px}
.dock-zone.dock-bottom .dock-body.active .cockpit-keymap-scroll{padding:0}
.dock-zone.dock-bottom .dock-body.active .cockpit-keymap-root{padding:var(--sp-2)}
.dock-zone.dock-bottom .dock-body.active .cockpit-keymap-status{margin:var(--sp-1) 0;line-height:1.25}
.dock-zone.dock-bottom .dock-body.active .cockpit-keymap-description,
.dock-zone.dock-bottom .dock-body.active .cockpit-keymap-source,
.dock-zone.dock-bottom .dock-body.active .cockpit-keymap-guide{margin:1px 0;line-height:1.25}
.cockpit-keymap-key{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;margin:2px;padding:var(--sp-2);border:1px solid var(--line-soft);border-bottom:3px solid var(--line);border-radius:var(--r-3);background:var(--card2);color:var(--dim);box-sizing:border-box;overflow:hidden}
.cockpit-keymap-legend{font-size:var(--fs-2);font-weight:600}
.cockpit-keymap-function{font-size:var(--fs-1);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-height:1.2em}
.cockpit-keymap-key.mapped{background:var(--card);color:var(--ink);border-color:var(--line)}
.cockpit-keymap-key.pressed{border-color:var(--accent2);box-shadow:0 0 5px var(--accent);color:var(--ink)}
.cockpit-keymap-key.accepted{background:var(--surface);border-color:var(--accent);color:var(--accent2)}
.cockpit-keymap-key.channel-active .cockpit-keymap-function{text-decoration:underline;text-decoration-color:var(--accent2)}
.cockpit-keymap-bindings{min-width:0;color:var(--ink)}
.cockpit-keymap-bindings-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px var(--sp-2)}
.cockpit-keymap-scroll.board-collapsed{display:none}
.cockpit-keymap-board-toggle{font:inherit;font-size:var(--fs-1);background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-1);padding:var(--sp-1) var(--sp-2);cursor:pointer;margin-bottom:var(--sp-2);align-self:flex-start}
.cockpit-keymap-board-toggle:hover{border-color:var(--accent)}
.cockpit-keymap-active-cluster{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-2);padding:var(--sp-1);background:var(--card2);border:1px solid var(--line);border-radius:var(--r-2)}
.cockpit-key-chip{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);background:var(--card);border:1px solid var(--line);border-radius:var(--r-1);font-size:var(--fs-1);color:var(--ink);cursor:pointer}
.cockpit-key-chip.pressed{border-color:var(--accent2);box-shadow:0 0 3px var(--accent)}
.cockpit-key-chip.accepted{background:var(--surface);border-color:var(--accent);color:var(--accent2)}
.cockpit-key-chip.selected{outline:2px solid var(--focus)}
.cockpit-key-action{font-size:var(--fs-1);color:var(--ink2)}
.cockpit-keymap-binding{display:flex;align-items:baseline;gap:var(--sp-3);min-height:17px;font-size:var(--fs-1);line-height:1.25;border:1px solid transparent;border-radius:var(--r-2);padding:0 var(--sp-2);box-sizing:border-box}
.cockpit-keymap-binding-keys{display:flex;gap:var(--sp-1);flex:none;min-width:38px}
.cockpit-keymap-binding-key{font:inherit;font-weight:600;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-1);padding:0 var(--sp-1);white-space:nowrap}
.cockpit-keymap-binding-label{min-width:0;overflow-wrap:anywhere}
.cockpit-keymap-binding.pressed{border-color:var(--accent2);box-shadow:0 0 3px var(--accent)}
.cockpit-keymap-binding.accepted{background:var(--surface);border-color:var(--accent);color:var(--accent2)}
/* 넓은 하단 도크만 777px 키보드 옆에 남는 공간으로 전체 기능명을 보여준다. */
@container(min-width:1050px){.dock-zone.dock-bottom .dock-body.active .cockpit-keymap-content{grid-template-columns:777px minmax(220px,1fr)}}
.cockpit-keymap-root[data-blocked=true] .cockpit-keymap-status{color:var(--help)}
.cockpit-keymap-profile:focus-visible,.cockpit-keymap-enable:focus-visible,.cockpit-keymap-collapse:focus-visible,.cockpit-keymap-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cockpit-keymap-root[hidden],.cockpit-keymap-body[hidden],.cockpit-keymap-enable[hidden],.cockpit-keymap-inspector[hidden],.cockpit-keymap-capture[hidden],.cockpit-keymap-prerequisites[hidden]{display:none}
.cockpit-keymap-prerequisites{margin:0 0 var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-2);background:var(--card2);color:var(--ink);font-size:var(--fs-1);line-height:1.35}
.cockpit-keymap-inspector{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--accent);border-radius:var(--r-3);background:var(--surface)}
.cockpit-keymap-inspection{flex:1 1 100%;margin:0;color:var(--ink);font-size:var(--fs-1);font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.cockpit-keymap-rebind,.cockpit-keymap-reset{min-height:26px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-1);padding:var(--sp-1) var(--sp-3);cursor:pointer}
.cockpit-keymap-rebind:hover,.cockpit-keymap-reset:hover{border-color:var(--accent)}
.cockpit-keymap-rebind:disabled,.cockpit-keymap-reset:disabled{opacity:.5;cursor:default}
.cockpit-keymap-capture{min-height:26px;border:1px solid var(--accent);border-radius:var(--r-2);background:var(--bg-0);color:var(--ink);font:inherit;font-size:var(--fs-1);padding:var(--sp-1) var(--sp-2)}
.cockpit-keymap-edit-status{margin:0;color:var(--accent2);font-size:var(--fs-1)}
.cockpit-keymap-semantics{margin-top:var(--sp-2);font-size:var(--fs-1);color:var(--ink2)}
.cockpit-keymap-semantic-summary{margin:var(--sp-1) 0;color:var(--dim)}
.cockpit-keymap-semantic-rows{display:grid;gap:2px}
.cockpit-keymap-semantic-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:2px var(--sp-2);border-left:2px solid var(--line);overflow-wrap:anywhere}
.cockpit-keymap-semantic-row[data-live]::after{content:attr(data-live);flex:none;font-family:ui-monospace,monospace;font-size:var(--fs-1);color:var(--dim);padding:0 var(--sp-1);border-radius:var(--r-1);background:var(--card2)}
.cockpit-keymap-semantic-row.active{border-color:var(--accent);background:var(--surface);color:var(--ink)}
.cockpit-keymap-semantic-row.active[data-live]::after{color:var(--accent2);background:var(--card)}
/* 텔레옵 키보드 툴바 · 플로팅 87키 모달 창 · 독립 Pop-out 창 · 3D 기계식 키캡 스타일 */
.cockpit-keymap-root,.cockpit-keymap-popout-body{--cockpit-keymap-role-axis:var(--accent2);--cockpit-keymap-role-button:var(--link-ok);--cockpit-keymap-role-pose:#b388ff;--cockpit-keymap-role-cap:var(--busy);--cockpit-keymap-role-stop:var(--err);--cockpit-keymap-role-pause:var(--help)}
/* 콕핏 루트로 옮겨진 떠 있는 87키 창(root 밖) — 위 줄과 같은 역할 색 */
.cockpit-keymap-scroll.is-floating-modal{--cockpit-keymap-role-axis:var(--accent2);--cockpit-keymap-role-button:var(--link-ok);--cockpit-keymap-role-pose:#b388ff;--cockpit-keymap-role-cap:var(--busy);--cockpit-keymap-role-stop:var(--err);--cockpit-keymap-role-pause:var(--help)}
.cockpit-keymap-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.cockpit-keymap-board-toggle,.cockpit-keymap-popout-btn,.cockpit-keymap-floating-close,.cockpit-keymap-popout-return{font:inherit;font-size:var(--fs-1);font-weight:600;background:var(--card);color:var(--ink);border:1px solid var(--line2);border-radius:var(--r-2);padding:var(--sp-1) var(--sp-3);min-height:28px;cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-1);margin-bottom:0}
.cockpit-keymap-board-toggle:hover,.cockpit-keymap-popout-btn:hover,.cockpit-keymap-floating-close:hover,.cockpit-keymap-popout-return:hover{border-color:var(--accent);background:var(--surface);color:var(--accent2)}
.cockpit-keymap-board-toggle.active,.cockpit-keymap-popout-btn.active{border-color:var(--accent2);background:var(--surface);color:var(--accent2);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 35%,transparent)}
/* Mode A: 넓은 드래그형 플로팅 87키 키보드 창 (position:fixed, DOM은 root 내부 유지) */
.cockpit-keymap-scroll.is-floating-modal{display:flex;flex-direction:column;gap:var(--sp-3);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(960px,94vw);max-width:94vw;max-height:min(88vh,840px);padding:var(--sp-4);border:1px solid var(--accent);border-radius:var(--r-4);background:var(--cp-card);color:var(--cp-text);box-shadow:0 20px 60px color-mix(in srgb,#000 40%,transparent),0 0 24px color-mix(in srgb,var(--accent) 22%,transparent);z-index:var(--z-modal, 80);overflow:hidden;box-sizing:border-box}
.cockpit-keymap-floating-header,.cockpit-keymap-popout-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--cp-card-sub);border:1px solid var(--cp-border);border-radius:var(--r-3);cursor:move;user-select:none;flex:none}
.cockpit-keymap-popout-header{cursor:default}
.cockpit-keymap-floating-header[hidden]{display:none}
.cockpit-keymap-floating-title-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);min-width:0}
.cockpit-keymap-floating-title{font-size:var(--fs-3);font-weight:700;color:var(--cp-text);letter-spacing:.2px;white-space:nowrap}
.cockpit-keymap-floating-badge{font-size:var(--fs-1);font-weight:600;color:var(--accent2);background:var(--surface);border:1px solid var(--accent);border-radius:var(--r-pill);padding:1px var(--sp-3);white-space:nowrap}
.cockpit-keymap-floating-pill{font-size:var(--fs-1);color:var(--cp-text2);background:var(--cp-card);border:1px solid var(--cp-border);border-radius:var(--r-pill);padding:1px var(--sp-3);white-space:nowrap}
.cockpit-keymap-floating-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.cockpit-keymap-floating-close{border-color:var(--err-line);color:var(--err)}
.cockpit-keymap-floating-close:hover{border-color:var(--err);background:var(--err-bg);color:var(--err)}
.cockpit-keymap-floating-body{display:flex;flex-direction:column;gap:var(--sp-3);min-height:0;overflow:auto;padding-right:var(--sp-1)}
.cockpit-keymap-keyboard-stage{display:flex;justify-content:safe center;align-items:center;overflow-x:auto;padding:var(--sp-3);border:1px solid var(--cp-border);border-radius:var(--r-3);background:var(--cp-card-sub);box-shadow:inset 0 1px 4px color-mix(in srgb,#000 18%,transparent)}
/* 18.5u 보드가 모달 안쪽 폭(모달 패딩·스테이지 패딩·테두리 ≈72px 제외)에 맞게 줄어든다 — 좁은 창에서도 가로로 잘리지 않는다 */
.cockpit-keymap-scroll.is-floating-modal .cockpit-keymap-keyboard{--cockpit-keymap-unit:clamp(30px,calc((min(960px,94vw) - 72px) / 18.5),48px)}
.cockpit-keymap-popout-body .cockpit-keymap-keyboard{--cockpit-keymap-unit:48px}
.cockpit-keymap-floating-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--sp-3);align-items:start;min-width:0}
.cockpit-keymap-floating-side > *{min-width:0}
.cockpit-keymap-floating-side[hidden]{display:none}
/* 3D 기계식 키캡 & 역할별(axis/button/pose/capability/stop/pause) 네온 테두리 */
.cockpit-keymap-key{position:relative;justify-content:space-between;padding:var(--sp-1) var(--sp-2);border:1px solid var(--line-soft);border-bottom:3px solid var(--line);border-radius:var(--r-2);background:linear-gradient(180deg,var(--card) 0%,var(--card2) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.45);transition:transform 60ms ease,box-shadow 90ms ease,border-color 90ms ease,background-color 90ms ease;cursor:pointer}
.cockpit-keymap-key:hover{border-color:var(--line2)}
.cockpit-keymap-legend{font-size:var(--fs-1);font-weight:700;line-height:1.1;letter-spacing:.2px}
.cockpit-keymap-function{font-size:10px;line-height:1.15;font-weight:600;opacity:.92}
.cockpit-keymap-key.bound-axis,.cockpit-keymap-binding.bound-axis{border-color:color-mix(in srgb,var(--cockpit-keymap-role-axis) 65%,var(--line));border-bottom-color:var(--cockpit-keymap-role-axis)}
.cockpit-keymap-key.bound-axis .cockpit-keymap-function{color:var(--cockpit-keymap-role-axis)}
.cockpit-keymap-key.bound-button,.cockpit-keymap-binding.bound-button{border-color:color-mix(in srgb,var(--cockpit-keymap-role-button) 65%,var(--line));border-bottom-color:var(--cockpit-keymap-role-button)}
.cockpit-keymap-key.bound-button .cockpit-keymap-function{color:var(--cockpit-keymap-role-button)}
.cockpit-keymap-key.bound-pose,.cockpit-keymap-binding.bound-pose{border-color:color-mix(in srgb,var(--cockpit-keymap-role-pose) 65%,var(--line));border-bottom-color:var(--cockpit-keymap-role-pose)}
.cockpit-keymap-key.bound-pose .cockpit-keymap-function{color:var(--cockpit-keymap-role-pose)}
.cockpit-keymap-key.bound-capability,.cockpit-keymap-binding.bound-capability{border-color:color-mix(in srgb,var(--cockpit-keymap-role-cap) 65%,var(--line));border-bottom-color:var(--cockpit-keymap-role-cap)}
.cockpit-keymap-key.bound-capability .cockpit-keymap-function{color:var(--cockpit-keymap-role-cap)}
.cockpit-keymap-key.bound-stop,.cockpit-keymap-binding.bound-stop{border-color:color-mix(in srgb,var(--cockpit-keymap-role-stop) 75%,var(--line));border-bottom-color:var(--cockpit-keymap-role-stop);background:color-mix(in srgb,var(--err-bg) 70%,var(--card))}
.cockpit-keymap-key.bound-stop .cockpit-keymap-function,.cockpit-keymap-key.bound-stop .cockpit-keymap-legend{color:var(--cockpit-keymap-role-stop)}
.cockpit-keymap-key.bound-pause,.cockpit-keymap-binding.bound-pause{border-color:color-mix(in srgb,var(--cockpit-keymap-role-pause) 65%,var(--line));border-bottom-color:var(--cockpit-keymap-role-pause)}
.cockpit-keymap-key.bound-pause .cockpit-keymap-function{color:var(--cockpit-keymap-role-pause)}
.cockpit-keymap-key.pressed{transform:translateY(1px);border-bottom-width:2px;border-color:var(--accent2);background:color-mix(in srgb,var(--surface) 85%,var(--accent));box-shadow:0 0 12px var(--accent),inset 0 0 6px color-mix(in srgb,var(--accent2) 45%,transparent);color:var(--ink)}
.cockpit-keymap-key.accepted{background:color-mix(in srgb,var(--surface) 75%,var(--accent));border-color:var(--accent2);box-shadow:0 0 14px color-mix(in srgb,var(--accent2) 55%,transparent);color:var(--ink)}
.cockpit-keymap-key.selected,.cockpit-keymap-binding.selected{outline:2px solid var(--focus);outline-offset:1px}
/* Mode B: 독립 브라우저 Pop-out 창 레이아웃 */
.cockpit-keymap-popout-body{margin:0;padding:var(--sp-4);background:var(--bg);color:var(--ink);font-family:"NanumSquareRound","Apple SD Gothic Neo","Noto Sans CJK KR",ui-sans-serif,system-ui,sans-serif;font-size:var(--fs-2);overflow:auto;height:100vh;box-sizing:border-box}
.cockpit-keymap-popout-root{display:flex;flex-direction:column;gap:var(--sp-3);max-width:1120px;margin:0 auto}
.cockpit-keymap-popout-main{display:flex;flex-direction:column;gap:var(--sp-3)}
.cockpit-keymap-popout-bottom{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-3);align-items:start}
.cockpit-keymap-popout-card{padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-3);background:var(--card)}