.cl-class-prejoin{width:min(960px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:var(--sketch-outline,2px solid #11131b);border-radius:var(--sketch-radius,23px 21px 25px 20px / 22px 25px 20px 24px);background:var(--sketch-paper,#fffef8);color:var(--sketch-ink,#11131b);box-shadow:5px 6px 0 #11131b,0 20px 70px #0003;font:15px/1.45 var(--sketch-font-body,system-ui,sans-serif);overflow:hidden}
.cl-class-prejoin[open]{display:flex;flex-direction:column}
.cl-class-prejoin::backdrop{background:#11131b99}
.cl-class-prejoin:not([open]),.cl-class-prejoin [hidden]{display:none!important}
.cl-class-prejoin *{box-sizing:border-box}
.cl-class-prejoin .cl-prejoin-head{display:flex;flex-shrink:0;align-items:center;gap:14px;padding:16px 22px;border-bottom:2px solid #11131b}
.cl-class-prejoin .cl-prejoin-head strong{font:700 24px/1.2 var(--sketch-font-title,CamlangsNanum,'Trebuchet MS',sans-serif)}
.cl-class-prejoin .cl-prejoin-head span{margin-left:auto;padding:4px 10px;border:1.5px solid #11131b;border-radius:11px 14px 10px 13px;background:var(--sketch-yellow,#ffd43c);font-size:12px}
.cl-class-prejoin .cl-prejoin-body{display:grid;flex:1;min-height:0;grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr);gap:22px;padding:22px;overflow:auto}
.cl-class-prejoin .cl-prejoin-visual{position:relative;display:grid;place-items:center;align-self:start;min-width:0;aspect-ratio:4/3;overflow:hidden;border:2px solid #11131b;border-radius:18px 23px 17px 21px;background:#fff5d2}
.cl-class-prejoin .cl-prejoin-account{max-width:calc(100% - 24px);padding:8px 12px;text-align:center;overflow-wrap:anywhere;font-family:var(--sketch-font-title,CamlangsNanum,'Trebuchet MS',sans-serif)}
.cl-class-prejoin .cl-prejoin-visual:has(video:not([hidden])) .cl-prejoin-account{position:absolute;bottom:10px;z-index:1;border:1.5px solid #11131b;border-radius:9px 11px;background:#fffef8}
.cl-class-prejoin .cl-prejoin-live{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scaleX(-1);background:#11131b}
.cl-class-prejoin .cl-prejoin-settings{display:grid;align-content:start;gap:12px;min-width:0}
.cl-class-prejoin p{margin:0}
.cl-class-prejoin label{display:grid;gap:5px;font:700 14px/1.3 var(--sketch-font-title,CamlangsNanum,'Trebuchet MS',sans-serif)}
.cl-class-prejoin select{width:100%;min-width:0;min-height:42px;padding:9px 10px;border:1.5px solid #11131b;border-radius:10px 13px 9px 12px;background:#fff;color:#11131b;font:14px var(--sketch-font-body,system-ui,sans-serif);text-overflow:ellipsis}
.cl-class-prejoin button{min-height:44px;padding:9px 14px;border:2px solid #11131b;border-radius:12px 15px 10px 13px;background:#fffef8;color:#11131b;font:700 14px/1.3 var(--sketch-font-title,CamlangsNanum,'Trebuchet MS',sans-serif);cursor:pointer;transition:background .15s,transform .15s}
.cl-class-prejoin button:hover:not(:disabled){background:#fff5d2}
.cl-class-prejoin button:active:not(:disabled){transform:translateY(1px)}
.cl-class-prejoin :is(button,select):focus-visible{outline:3px solid #11131b;outline-offset:3px}
.cl-class-prejoin :is(button,select):disabled{opacity:.5;cursor:default}
.cl-class-prejoin .cl-prejoin-status{font-size:12px;overflow-wrap:anywhere}
.cl-class-prejoin .cl-prejoin-status[data-error=true]{text-decoration:underline;text-decoration-color:#11131b}
.cl-class-prejoin .cl-prejoin-test{display:grid;gap:10px;padding:10px;border:1.5px solid #11131b;border-radius:13px;background:#fff5d2}
.cl-class-prejoin .cl-prejoin-playback{display:block;width:100%;max-height:180px;border-radius:10px;background:#11131b;object-fit:contain}
.cl-class-prejoin small{font-size:12px}
.cl-class-prejoin .cl-prejoin-footer{display:grid;flex-shrink:0;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;padding:16px 22px;border-top:2px solid #11131b;background:#fffef8}
.cl-class-prejoin .cl-prejoin-messages{justify-self:start;padding-inline:10px}
.cl-class-prejoin .cl-prejoin-join{--sketch-button-fill:var(--sketch-yellow,#ffd43c);--sketch-button-border:#11131b;grid-column:2;justify-self:center;background:var(--sketch-yellow,#ffd43c);padding-inline:24px;box-shadow:2px 3px 0 #11131b}
.cl-class-prejoin .cl-prejoin-join:hover:not(:disabled){background:#ffe47c}
@media(max-width:650px){.cl-class-prejoin{max-height:calc(100dvh - 16px);border-radius:17px 21px 16px 19px}.cl-class-prejoin .cl-prejoin-body{grid-template-columns:minmax(0,1fr);gap:14px;padding:14px}.cl-class-prejoin .cl-prejoin-visual{width:100%;max-height:220px;aspect-ratio:16/9}.cl-class-prejoin .cl-prejoin-head{padding:12px 14px}.cl-class-prejoin .cl-prejoin-footer{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:4px;padding:12px 8px}.cl-class-prejoin .cl-prejoin-footer button{font-size:12px;padding-inline:7px}.cl-class-prejoin .cl-prejoin-join{max-width:160px}.cl-class-prejoin .cl-prejoin-messages{border-color:transparent;padding-inline:0}}
@media(prefers-reduced-motion:reduce){.cl-class-prejoin,.cl-class-prejoin *{animation:none!important;transition:none!important}.cl-class-prejoin button:active:not(:disabled){transform:none}}