@charset "UTF-8";*{touch-action:none}@keyframes place-bottom{to{opacity:1;transform:translate(-50%,20%);-webkit-transform:translate(-50%,20%);-moz-transform:translate(-50%,20%);-ms-transform:translate(-50%,20%);-o-transform:translate(-50%,20%)}}@keyframes move-stripes{0%{background-position:0 0}to{background-position:300px 0}}@-webkit-keyframes move-stripes{0%{background-position:0 0}to{background-position:300px 0}}@-moz-keyframes move-stripes{0%{background-position:0 0}to{background-position:300px 0}}html,body,#root{height:100%;margin:0;-webkit-user-select:none;user-select:none;background:#000;overflow:hidden}#cursor{pointer-events:none;position:fixed;mix-blend-mode:exclusion}#cursor svg{pointer-events:none;color:#fff;display:none;position:absolute;width:24px;height:24px;transform:translateY(-100%);-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);filter:drop-shadow(3px 0px 3px rgba(0,0,0,.4));-webkit-filter:drop-shadow(3px 0px 3px rgba(0,0,0,.4))}#cursor[drawmode] svg{pointer-events:none;display:unset}canvas{cursor:none}@media (max-width: 750px){canvas{width:100%;height:auto}}body #container svg{width:20px;height:20px}body #container input[type=number],body #container button{outline:none;padding:.3rem .5rem;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem}body #container .hidden,body #container [hidden]{display:none}body #container input[type=number]{border:1px solid #ccc;width:30px}body #container button{cursor:pointer;display:inline-flex;align-items:center;column-gap:8px;font-size:.95rem;text-transform:uppercase;border:none;background-color:#666;color:#fff;box-shadow:0 0 0 1px #ccc}body #container [data-tool]{position:relative}body #container div:has(>[data-tool=fps]):before{content:"FPS:"}body #container [data-tool][active]{background-color:#2d8661;box-shadow:inset 5px 5px 1rem #166d49,inset -5px -5px 1rem #2ba371,2px 2px 5px #2ba371,-2px -2px 5px #9cd4bd}.progress{width:300px;height:20px}.progress .progress-bar{display:inline-block;border:1px solid #ccc;background-color:#fff;border-radius:.3rem;-webkit-border-radius:.3rem;-moz-border-radius:.3rem;-ms-border-radius:.3rem;-o-border-radius:.3rem;width:inherit;height:inherit}.progress .progress-bar .progress-value{display:inline-block;width:0%;height:inherit;background:repeating-linear-gradient(-45deg,#04aa6d,#04aa6d 7.6px,#5ac19b 7.6px,#5ac19b 15.2px,#04aa6d 15.2px,#04aa6d 22.8px,#5ac19b 22.8px,#5ac19b 30.4px,#04aa6d 30.4px,#04aa6d 38px,#5ac19b 38px,#5ac19b 45.6px,#04aa6d 45.6px,#04aa6d 53.2px,#5ac19b 53.2px,#5ac19b 60.8px,#04aa6d 60.8px,#04aa6d 68.4px,#5ac19b 68.4px,#5ac19b 76px);border-radius:.3rem;-webkit-border-radius:.3rem;-moz-border-radius:.3rem;-ms-border-radius:.3rem;-o-border-radius:.3rem;animation:move-stripes 7s linear infinite;-webkit-animation:"move-stripes" 7s linear infinite}[data-tool=create-page-before]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"앞 페이지 추가"}[data-tool=create-page-before] svg{transform:scaleX(-1);-webkit-transform:scaleX(-100%);-moz-transform:scaleX(-100%);-ms-transform:scaleX(-100%);-o-transform:scaleX(-100%)}[data-tool=create-page-after]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"뒤 페이지 추가"}[data-tool=copy-page]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"페이지 복사"}[data-tool=clear-copy-page]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"복사 초기화"}[data-tool=paste-page]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"페이지 붙여넣기"}[data-tool=delete-page]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"페이지 삭제"}[data-tool=save]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"저장"}[data-tool=load]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"불러오기"}[data-tool=gif-repeat][active]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"GIF 재생 반복"}[data-tool=gif-repeat]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"GIF 재생 반복"}[data-tool=use-repeat-delay][active]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"지연 시간 사용"}[data-tool=use-repeat-delay]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"지연 시간 사용"}[data-tool=export-gif]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"GIF 내보내기"}[data-tool=pen]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"연필"}[data-tool=erase]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"지우개"}[data-tool=all-erase]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"모두 지우기"}[data-tool=play][active]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"정지"}[data-tool=play]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"재생"}[data-tool=prev-page]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"이전 페이지"}[data-tool=next-page]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"다음 페이지"}[data-tool=undo]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"마지막 라인 제거"}[data-tool=total]:before{content:"/ "}[data-tool=total]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"전체 페이지"}[data-tool=both-side-lines]:hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"가이드 라인 활성"}div:has(>input){display:flex;align-items:center;gap:.3rem}div:has(>[data-tool]){position:relative}div:has(>[data-tool=page]):hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"현재 페이지"}div:has(>[data-tool=thickness]):hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"두께"}div:has(>[data-tool=fps]):hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"초당 프레임"}div:has(>[data-tool=repeat-delay]):hover:after{pointer-events:none;opacity:0;position:absolute;top:100%;left:50%;white-space:nowrap;font-size:.75rem;font-weight:700;color:#fff;background-color:#000;padding:.2rem .5rem;z-index:5;border-radius:.2rem;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;-ms-border-radius:.2rem;-o-border-radius:.2rem;animation:place-bottom .15s ease-in-out both;-webkit-animation:"place-bottom" .15s ease-in-out both;transform:translate(-50%);-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);content:"반복 지연 시간(초)"}