.panel{position:fixed;inset:auto;left:0;top:0;width:640px;height:440px;background:rgba(255,255,255,0.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 16px 48px rgba(0,0,0,.4);overflow:hidden;opacity:0;transform:scale(.98);transition:opacity .18s ease, transform .18s ease;cursor:move}
.panel.visible{opacity:1;transform:none}
.panel.closing{opacity:0;transform:scale(.98)}
.panel-header{position:absolute;top:12px;right:12px;z-index:10;display:flex;align-items:center;justify-content:flex-end;background:none;}
.panel-close{appearance:none;background:rgba(255,255,255,0);color:#000000;padding:12px;cursor:pointer;border:none;border-radius:4px;font-size:14px;line-height:1;}
.panel-body{height:100%;display:flex;align-items:center;justify-content:center;cursor:move}
/* 4개 모서리 리사이즈 핸들 */

.panel-resize-nw, .panel-resize-ne, .panel-resize-sw, .panel-resize-se{opacity:0;transition:opacity 0.3s ease;}
.panel:hover .panel-resize-nw, .panel:hover .panel-resize-ne, .panel:hover .panel-resize-sw, .panel:hover .panel-resize-se{opacity:1;transition:opacity 0.3s ease;}
.panel-resize-nw{position:absolute;width:16px;height:16px;left:8px;top:8px;border-left:2px solid #3a3a3a;border-top:2px solid #3a3a3a;cursor:nw-resize}
.panel-resize-ne{position:absolute;width:16px;height:16px;right:8px;top:8px;border-right:2px solid #3a3a3a;border-top:2px solid #3a3a3a;cursor:ne-resize}
.panel-resize-sw{position:absolute;width:16px;height:16px;left:8px;bottom:8px;border-left:2px solid #3a3a3a;border-bottom:2px solid #3a3a3a;cursor:sw-resize}
.panel-resize-se{position:absolute;width:16px;height:16px;right:8px;bottom:8px;border-right:2px solid #3a3a3a;border-bottom:2px solid #3a3a3a;cursor:se-resize}