/* Figma 6152:22807: 400px camera preview, 40px header, 16:9 image. */
#sphere-view[data-sphere-shell] #sph-pip{width:min(400px,calc(100% - 140px));height:auto;max-width:none;max-height:none;aspect-ratio:auto;position:absolute;top:auto;right:var(--sph-pip-dock-right,110px);bottom:calc(var(--sph-timeline-safe,0px) + 10px);left:auto;border:1px solid #ffffff0d;border-radius:16px;overflow:hidden;background:transparent;pointer-events:auto;box-shadow:0 8px 24px #0003}
#sphere-view[data-sphere-shell] #sph-pip .sph-pip-head{height:40px;display:flex;align-items:center;gap:8px;padding:7px 8px;background:#1e1e1e;box-sizing:border-box;border-bottom:1px solid #ffffff0d}
#sphere-view[data-sphere-shell] #sph-pip .sph-pip-title{position:static;background:none;padding:0 8px;border:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b5b5b5;font:400 11px/16px 'Spline Sans',Pretendard,sans-serif;letter-spacing:.3px}
#sphere-view[data-sphere-shell] #sph-pip button{height:26px;min-height:26px;padding:4px 8px;flex:none;border:0;border-radius:6px;background:#ffffff08;color:#b5b5b5;font:400 11px/16px 'Spline Sans',Pretendard,sans-serif;letter-spacing:.3px;white-space:nowrap;cursor:pointer}
#sphere-view[data-sphere-shell] #sph-pip button:hover{background:#ffffff1a;color:#ededed}
#sphere-view[data-sphere-shell] #sph-pip button:focus-visible{outline:1px solid #c4c4c4;outline-offset:-2px}
#sphere-view[data-sphere-shell] #sph-pip [data-pip-collapse]{height:24px;min-height:24px;width:24px;padding:0;display:grid;place-items:center;background:#ffffff0d}
#sphere-view[data-sphere-shell] #sph-pip .sph-pip-image{width:100%;aspect-ratio:16/9;background:transparent;cursor:pointer}
#sphere-view[data-sphere-shell] #sph-pip[data-collapsed=true] .sph-pip-image{display:none}
#sphere-view[data-sphere-shell] #sph-pip[data-collapsed=true] .sph-pip-head{border-bottom:0}
@media(max-width:1100px){#sphere-view[data-sphere-shell] #sph-pip{width:min(330px,calc(100% - 24px))}#sphere-view[data-sphere-shell] #sph-pip .sph-pip-head{gap:4px;padding-inline:6px}#sphere-view[data-sphere-shell] #sph-pip button{padding-inline:5px}#sphere-view[data-sphere-shell] #sph-pip .sph-pip-title{padding-inline:2px}}
#sphere-view[data-sphere-shell][data-sphere-compact=true] #sph-pip{width:min(330px,calc(100% - 124px));height:auto;max-height:none}
#sphere-view[data-sphere-shell] #sph-pip .sph-pip-title{text-transform:none;text-shadow:none}

/* 48번째 (2026-09-16 · 감독): PiP 는 우하단 도킹 — 뷰 내비게이션(XYZ) 위젯과 같은 10px 여백을 두고 그 왼쪽에 붙는다(right = 10 + 위젯 폭 + 10 · JS 가 실측해 --sph-pip-dock-right 로 준다).
   머리를 끌면 자유 위치(left/top · data-pip-free), 오른쪽 아래 모서리를 끌면 크기, 머리 더블클릭이면 도킹으로 복귀. 위치 · 크기는 브라우저에 기억한다. */
#sphere-view[data-sphere-shell] #sph-pip[data-pip-free="true"]{right:auto;bottom:auto;transition:none}
#sphere-view[data-sphere-shell] #sph-pip .sph-pip-head{cursor:move;user-select:none;touch-action:none}
#sphere-view[data-sphere-shell] #sph-pip .sph-pip-head button{cursor:pointer}
#sphere-view[data-sphere-shell] #sph-pip .sph-pip-resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 50%,#ffffff33 50%,#ffffff33 60%,transparent 60%,transparent 75%,#ffffff33 75%,#ffffff33 85%,transparent 85%);border-radius:0 0 16px 0}
#sphere-view[data-sphere-shell] #sph-pip[data-collapsed=true] .sph-pip-resize{display:none}
#sphere-view[data-sphere-shell] #sph-pip.is-pip-dragging{box-shadow:0 12px 32px #0006;opacity:.96}