.frostedglassmorphism{background:#fff6;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.back{background:#11182766;box-shadow:0 4px 30px #0000001a}#video-files{display:block;margin-top:5px}#file-list-info{font-size:.9em;color:#666;margin-top:10px}.input-section{margin-bottom:20px;text-align:left;display:flex;flex-wrap:wrap;gap:15px}input{font-family:KBO-Dia-Gothic_medium,Arial,sans-serif;font-size:16px}input[type=file]{color:#333}input[type=file]::file-selector-button{background-color:var(--primary-color);color:#fff;font-family:KBO-Dia-Gothic_medium,Arial,sans-serif;border:none;padding:6px 12px;border-radius:5px}@font-face{font-family:KBO-Dia-Gothic_medium;src:url(https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Giants-Regular.woff2) format("woff2");font-weight:500;font-style:normal}@font-face{font-family:KBO-Dia-Gothic_Bold;src:url(https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Giants-Bold.woff2) format("woff2");font-weight:500;font-style:normal}input[type=color]{width:25px}body{width:100%;height:100%;font-family:KBO-Dia-Gothic_medium,Arial,sans-serif;background-color:#f0f2f5;color:#333;justify-content:center;align-items:center;margin:0;text-align:center;line-height:180%;display:flex;flex-direction:column;min-height:100vh;word-break:keep-all}:root{--primary-color: #6799fa;--secondary-color: #17121f}ul{list-style-type:circle;list-style-position:inside;margin:0;padding:0}ol{list-style-position:inside;padding-inline-start:0px}hr{width:100%;border-top:1px dashed #ccc;margin:5px 0}ol li,ul li{margin:20px auto}a,a:visited{text-decoration:none;color:inherit}h1{font-size:20px}button,.label-for-btn{display:inline-block;font-family:KBO-Dia-Gothic_medium,Arial,sans-serif;font-size:15px;background-color:var(--primary-color);color:#fff;border:none;border-radius:5px;padding:5px 10px;margin:5px;line-height:normal;-webkit-user-select:none;user-select:none}select{font-family:KBO-Dia-Gothic_medium,Arial,sans-serif;padding:6px 12px}details>div{padding-bottom:10px}summary h1{display:inline-block;font-size:20px}table{width:100%;margin:0;table-layout:fixed;border-collapse:collapse}th,td{border:1px solid #ddd;padding:8px;overflow-x:auto}th{background-color:#f2f2f2}.text-left{text-align:left}.text-right{text-align:right}#boxes>.container{padding:0}.container{max-width:min(750px,calc(200vh - 300px));width:calc(100% - 60px);text-align:center;position:relative;padding:10px 15px;margin:0 auto;overflow:hidden}.slider>.container{padding:10px 15px}canvas{display:block}.float-left{float:left}.float-right{float:right}#wrapper{width:100%;height:100%;font-family:KBO-Dia-Gothic_medium,Arial,sans-serif;background-color:#f0f2f5;color:#333;align-items:center;margin:0;text-align:center;line-height:180%;display:flex;flex-direction:column;min-height:100vh;word-break:keep-all}#boxes{display:flex;gap:20px;flex-direction:column;flex:1;width:100%;padding:20px 0}#process-button{padding:12px 24px;margin:0;font-size:16px;cursor:pointer;transition:background-color .3s;width:100%}#process-button:disabled{background-color:var(--secondary-color);cursor:not-allowed}#process-button:hover:not(:disabled){color:var(--secondary-color)}#status-section{margin-top:20px}#status-message{font-weight:700}#progress-bar-container{background-color:var(--secondary-color);border-radius:5px;height:10px;margin:10px}#progress-bar{background-color:var(--primary-color);height:100%;width:0;border-radius:5px;transition:width .3s ease}#download-section{margin-top:20px}#download-link{background-color:var(--primary-color);color:#fff;padding:10px 20px;text-decoration:none;border-radius:5px;transition:background-color .3s}#download-link:hover{background-color:var(--primary-color)}.viewer-container{display:flex;flex-direction:column;align-items:center;margin-top:20px}.outputImage{width:100%;height:100%}#frameSlider{width:100%}#frameInfo{margin-top:10px;font-size:1.2em}.scrolled-content{padding:0 20px;overflow-y:scroll;overflow-x:hidden}.content{display:flex;flex-direction:column}.divide{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;align-items:center;justify-content:space-between}.flex-view{display:flex;flex-direction:column;gap:10px}.frameMakerSetting>*{white-space:nowrap}nav,.nav{position:sticky;top:0;width:100%;background-color:var(--secondary-color);font-size:15px;margin:0;z-index:20;transition:transform .5s ease;color:#aaa;display:flex;flex-wrap:wrap;justify-content:center}nav.hidden,.nav.hidden{transform:translateY(-100%)}nav>*,.nav>*{padding:10px;flex-grow:1}nav h1,.nav h1{font-weight:400;font-size:15px;margin:0}nav ul,.nav ul{margin:0}nav li,.nav li{display:inline-block;margin:0 5px;min-width:40px;padding:0}nav h1 a,.nav h1 a{display:inline-block}nav button,nav .label-for-btn{color:#aaa;padding:0;background-color:transparent;margin:0}nav a,.nav a,nav button,nav .label-for-btn{-webkit-transition:color .2s linear;-ms-transition:color .2s linear;transition:color .2s linear}nav a:hover,.nav a:hover,nav button:hover,nav .label-for-btn:hover{color:var(--primary-color)}nav select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0px center;background-size:12px;color:#aaa;border-width:0;padding:0 25px 0 0;font-size:15px}nav option{background-color:var(--secondary-color)}nav option:checked{color:var(--primary-color)}.neumorphism{border-radius:10px;background:#fff;box-shadow:20px 20px 60px #d9d9d9,-20px -20px 60px #fff}.neumorphism{background-color:#fff;border-radius:10px;box-shadow:0 4px 8px #0000001a}.panel{position:fixed;inset:0;z-index:10;padding:20px}.slider{position:sticky;bottom:0;left:0;right:0;z-index:3;width:100%;display:flex;padding-bottom:20px;justify-content:center}.slider>.container{margin-top:0}input[type=range]{accent-color:var(--primary-color);margin:10px auto}input[type=range]:active{accent-color:var(--primary-color)}.hamburger-button{position:relative;float:right;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}@media(min-width:768px){.hamburger-button{display:none}}@media(max-width:767px){.hamburger-button{display:block}}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.hamburger-button .icon-bar{background-color:#fff;display:block;width:22px;height:3px;border-radius:1px;margin-top:5px}.remove-box-button{position:absolute;font-family:sans-serif;font-weight:1000;top:5px;right:10px;width:25px;height:25px;background-color:transparent;border:none;color:gray;font-size:20px;padding:0;line-height:20px}.minimax-box-button{position:absolute;font-family:sans-serif;font-weight:1000;top:5px;right:45px;width:25px;height:25px;background-color:transparent;border:none;color:gray;font-size:20px;padding:0;line-height:20px}.add-box-button{background:transparent;border:none;color:gray;font-size:20px;width:100%;height:100%}.pop-up{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:calc(100% - 90px);max-width:720px;max-height:90%;padding:10px 25px;z-index:10}.pop-up-content,.pop-up .content{margin:auto;max-height:calc(72vh - 150px)}.toggle{position:absolute;padding-bottom:70px;left:50%;bottom:0;transform:translate(-50%);width:calc(100% - 70px);max-width:750px}.toggle .close-btn{position:absolute;font-family:sans-serif;font-weight:1000;top:5px;right:5px;width:25px;height:25px;background-color:transparent;border:none;color:gray;font-size:20px;padding:0;line-height:20px}.toggle-btn{position:absolute;font-family:sans-serif;font-weight:1000;top:5px;right:45px;width:25px;height:25px;background-color:transparent;border:none;color:gray;font-size:20px;padding:0;line-height:20px}.toggle-content,.toggle .content{transition:max-height 2s cubic-bezier(0,1,0,1);max-height:calc(81vh - 150px);height:100vh}*[data-state=min] .toggle-content,*[data-state=min] .toggle .content,*[data-state=min] .toggle-content-a{max-height:150px}.panel:has(.toggle){z-index:1}.frostedglassmorphism:has(.toggle){box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px)}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;user-select:none}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px;opacity:0}.react-grid-item:hover>.react-resizable-handle{opacity:1}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}