{"id":2158,"date":"2017-04-01T15:19:42","date_gmt":"2017-04-01T06:19:42","guid":{"rendered":"https:\/\/pixelist.art\/?p=2158"},"modified":"2025-04-09T20:30:06","modified_gmt":"2025-04-09T11:30:06","slug":"recapture","status":"publish","type":"post","link":"http:\/\/pixelist.kr\/recapture","title":{"rendered":"RECAPTURE"},"content":{"rendered":"\n<div class=\"wp-block-group G1 is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-61 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group Box1 has-vivid-green-cyan-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\"><\/div>\n\n\n\n<div class=\"wp-block-group Box1_1 has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"background-color:#11161c\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full Logo\"><a href=\"https:\/\/pixelist.kr\"><img loading=\"lazy\" decoding=\"async\" width=\"100\" height=\"20\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2023\/05\/pixelist.png\" alt=\"\" class=\"wp-image-162\" title=\"\"><\/a><\/figure>\n\n\n\n<div class=\"wp-block-group Box1_2 has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"background-color:#15202b\"><\/div>\n\n\n\n<div class=\"wp-block-group MenuPR is-vertical is-layout-flex wp-container-core-group-is-layout-22 wp-block-group-is-layout-flex\" style=\"padding-top:39px\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-5 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-4 wp-block-group-is-layout-constrained\" style=\"padding-right:10px\">\n<figure class=\"wp-block-image size-full\"><a href=\"pixelist.kr\"><img loading=\"lazy\" decoding=\"async\" width=\"32\" height=\"32\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/prev.png\" alt=\"\" class=\"wp-image-8176\" title=\"\"><\/a><\/figure>\n<\/div>\n\n\n\n<p class=\"ProjectName\" style=\"font-size:13px\"><a href=\"https:\/\/pixelist.kr\" data-type=\"post\" data-id=\"1447\">\ub4a4\ub85c\uac00\uae30<\/a><\/p>\n<\/div>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer ProjectArea wp-container-content-1\"><\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-7 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-6 wp-block-group-is-layout-constrained\" style=\"padding-right:10px\">\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/pixelist.kr\/?p=4724\"><img loading=\"lazy\" decoding=\"async\" width=\"1018\" height=\"1024\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2023\/09\/poster2-1018x1024.png\" alt=\"\" class=\"wp-image-5030\" style=\"width:32px;height:32px\" title=\"\" srcset=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2023\/09\/poster2-1018x1024.png 1018w, http:\/\/pixelist.kr\/wp-content\/uploads\/2023\/09\/poster2-298x300.png 298w, http:\/\/pixelist.kr\/wp-content\/uploads\/2023\/09\/poster2-150x150.png 150w, http:\/\/pixelist.kr\/wp-content\/uploads\/2023\/09\/poster2-768x773.png 768w, http:\/\/pixelist.kr\/wp-content\/uploads\/2023\/09\/poster2.png 1412w\" sizes=\"auto, (max-width: 1018px) 100vw, 1018px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<p class=\"ProjectName\" style=\"font-size:13px\"><a href=\"https:\/\/pixelist.kr\/?p=4724\">ChronoSword <\/a><\/p>\n<\/div>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer ProjectArea wp-container-content-2\"><\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-9 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-8 wp-block-group-is-layout-constrained\" style=\"padding-right:10px\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/pixelist.kr\/?p=6686\"><img loading=\"lazy\" decoding=\"async\" width=\"634\" height=\"631\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/gicon.png\" alt=\"\" class=\"wp-image-8790\" style=\"width:32px;height:32px\" title=\"\" srcset=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/gicon.png 634w, http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/gicon-300x300.png 300w, http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/gicon-150x150.png 150w\" sizes=\"auto, (max-width: 634px) 100vw, 634px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<p class=\"ProjectName\" style=\"font-size:13px\"><a href=\"https:\/\/pixelist.kr\/?p=6686\">\uc720\ub2c8\ud2f0 x G\uc2dd\ubc31\uacfc<\/a><\/p>\n<\/div>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer ProjectArea wp-container-content-3\"><\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-11 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-10 wp-block-group-is-layout-constrained\" style=\"padding-right:10px\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/pixelist.kr\/?p=6688\"><img loading=\"lazy\" decoding=\"async\" width=\"140\" height=\"140\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/\ud39c\ud0c0\ubaac\ub9ac\uadf8.gif\" alt=\"\" class=\"wp-image-8789\" style=\"width:32px;height:32px\" title=\"\"><\/a><\/figure>\n<\/div>\n\n\n\n<p class=\"ProjectName\" style=\"font-size:13px\"><a href=\"https:\/\/pixelist.kr\/?p=6688\">\ud39c\ud0c0\ubaac \ub9ac\uadf8<\/a><\/p>\n<\/div>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer ProjectArea wp-container-content-4\"><\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-13 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12 wp-block-group-is-layout-constrained\" style=\"padding-right:10px\">\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/pixelist.kr\/?p=4722\"><img loading=\"lazy\" decoding=\"async\" width=\"1018\" height=\"1024\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2020\/03\/cana2-1018x1024.png\" alt=\"\" class=\"wp-image-5507\" style=\"width:32px;height:32px\" title=\"\" srcset=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2020\/03\/cana2-1018x1024.png 1018w, http:\/\/pixelist.kr\/wp-content\/uploads\/2020\/03\/cana2-298x300.png 298w, http:\/\/pixelist.kr\/wp-content\/uploads\/2020\/03\/cana2-150x150.png 150w, http:\/\/pixelist.kr\/wp-content\/uploads\/2020\/03\/cana2-768x772.png 768w, http:\/\/pixelist.kr\/wp-content\/uploads\/2020\/03\/cana2.png 1232w\" sizes=\"auto, (max-width: 1018px) 100vw, 1018px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<p class=\"ProjectName\" style=\"font-size:13px\"><a href=\"https:\/\/pixelist.kr\/?p=4722\">Carta<\/a><\/p>\n<\/div>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer ProjectArea wp-container-content-5\"><\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-15 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-14 wp-block-group-is-layout-constrained\" style=\"padding-right:10px\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/pixelist.kr\/?p=2162\"><img loading=\"lazy\" decoding=\"async\" width=\"861\" height=\"866\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2023\/07\/post_atelier.png\" alt=\"\" class=\"wp-image-5042\" style=\"width:32px;height:32px\" title=\"\" srcset=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2023\/07\/post_atelier.png 861w, http:\/\/pixelist.kr\/wp-content\/uploads\/2023\/07\/post_atelier-298x300.png 298w, http:\/\/pixelist.kr\/wp-content\/uploads\/2023\/07\/post_atelier-150x150.png 150w, http:\/\/pixelist.kr\/wp-content\/uploads\/2023\/07\/post_atelier-768x772.png 768w\" sizes=\"auto, (max-width: 861px) 100vw, 861px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<p class=\"ProjectName\" style=\"font-size:13px\"><a href=\"https:\/\/pixelist.kr\/?p=2162\">Atelier<\/a><\/p>\n<\/div>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer ProjectArea wp-container-content-6\"><\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-17 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-16 wp-block-group-is-layout-constrained\" style=\"padding-right:10px\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/pixelist.kr\/?p=2160\"><img loading=\"lazy\" decoding=\"async\" width=\"384\" height=\"384\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2019\/07\/s1.png\" alt=\"\" class=\"wp-image-5726\" style=\"width:32px;height:32px\" title=\"\" srcset=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2019\/07\/s1.png 384w, http:\/\/pixelist.kr\/wp-content\/uploads\/2019\/07\/s1-300x300.png 300w, http:\/\/pixelist.kr\/wp-content\/uploads\/2019\/07\/s1-150x150.png 150w\" sizes=\"auto, (max-width: 384px) 100vw, 384px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<p class=\"ProjectName\" style=\"font-size:13px\"><a href=\"https:\/\/pixelist.kr\/?p=2160\">Cupid<\/a><\/p>\n<\/div>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer ProjectArea wp-container-content-7\"><\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-19 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-18 wp-block-group-is-layout-constrained\" style=\"padding-right:10px\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/pixelist.kr\/?p=2158\"><img loading=\"lazy\" decoding=\"async\" width=\"192\" height=\"192\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/post_recapture3.png\" alt=\"\" class=\"wp-image-5987\" style=\"width:32px;height:32px\" title=\"\" srcset=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/post_recapture3.png 192w, http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/post_recapture3-150x150.png 150w\" sizes=\"auto, (max-width: 192px) 100vw, 192px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<p class=\"ProjectName\" style=\"font-size:13px\"><a href=\"https:\/\/pixelist.kr\/?p=2158\">RECAPTURE<\/a><\/p>\n<\/div>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer ProjectArea wp-container-content-8\"><\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-21 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-20 wp-block-group-is-layout-constrained\" style=\"padding-right:10px\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/pixelist.kr\/?p=2149\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"315\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2015\/03\/icon3.png\" alt=\"\" class=\"wp-image-5509\" style=\"width:32px;height:32px\" title=\"\" srcset=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2015\/03\/icon3.png 300w, http:\/\/pixelist.kr\/wp-content\/uploads\/2015\/03\/icon3-286x300.png 286w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<p class=\"ProjectName\" style=\"font-size:13px\"><a href=\"https:\/\/pixelist.kr\/?p=2149\">AvoidTap: Reborn<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group P_BG has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\"><\/div>\n\n\n\n<div class=\"wp-block-group G2 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group G3 has-background is-nowrap is-layout-flex wp-container-core-group-is-layout-25 wp-block-group-is-layout-flex\" style=\"background-color:#11161c\">\n<figure class=\"wp-block-image size-full SubLogo\"><img loading=\"lazy\" decoding=\"async\" width=\"15\" height=\"20\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/p-1.png\" alt=\"\" class=\"wp-image-7903\" title=\"\"><\/figure>\n\n\n<style>\n.wp-block-embed-youtube {\n  position: relative;\n}\n\n.wp-block-embed-youtube .scroll-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 10;\n  cursor: pointer;\n  background: transparent;\n}\n<\/style>\n\n<form role=\"search\" method=\"get\" action=\"https:\/\/pixelist.kr\/\" \nclass=\"wp-block-search__button-outside wp-block-search__text-button SearchBar wp-block-search\">\n    <div class=\"wp-block-search__inside-wrapper\">\n        <input type=\"search\" id=\"wp-block-search__input-4\" class=\"wp-block-search__input\" autocomplete='off' placeholder=\" \uac80\uc0c9\uc5b4\ub97c \uc785\ub825\ud558\uc138\uc694.\" name=\"s\" value=\"\" placeholder=\"\" required=\"\">\n        <div class=\"custom-caret\"><\/div>\n    <\/div>\n<\/form>\n\n<script>\n\n\n\/\/ document.addEventListener('DOMContentLoaded', function() {\n\/\/   const wrapper = document.querySelector('.wp-block-embed__wrapper');\n\/\/   if (!wrapper) return;\n  \n\/\/   wrapper.style.position = 'relative';\n\n\/\/   const overlay = document.createElement('div');\n\/\/   overlay.style.position = 'absolute';\n\/\/   overlay.style.top = '0';\n\/\/   overlay.style.left = '0';\n\/\/   overlay.style.width = '100%';\n\/\/   overlay.style.height = '100%';\n\/\/   overlay.style.zIndex = '10';\n\/\/   overlay.style.background = 'transparent';\n\/\/   overlay.style.cursor = 'pointer';\n\n\/\/   wrapper.appendChild(overlay);\n\n\/\/   overlay.addEventListener('wheel', function(e) {\n\/\/     window.scrollBy(0, e.deltaY);\n\/\/   }, { passive: true });\n\n\/\/   let touchY = 0;\n\/\/   overlay.addEventListener('touchstart', function(e) {\n\/\/     touchY = e.touches[0].clientY;\n\/\/   }, { passive: true });\n\/\/   overlay.addEventListener('touchmove', function(e) {\n\/\/     const delta = touchY - e.touches[0].clientY;\n\/\/     window.scrollBy(0, delta);\n\/\/     touchY = e.touches[0].clientY;\n\/\/   }, { passive: true });\n\n\/\/ overlay.addEventListener('mouseenter', function() {\n\/\/   overlay.style.pointerEvents = 'none';\n\/\/ });\n\n\/\/ wrapper.addEventListener('mouseleave', function() {\n\/\/   overlay.style.pointerEvents = '';\n\/\/ });\n\/\/ });\n\n    \/\/pc \uc2a4\ud06c\ub864 \uad6c\ud604\n    document.querySelector('.G2').addEventListener('wheel', function(e) {\n        window.scrollBy(0, e.deltaY);\n    }, { passive: true });\n\n    \/\/ \ubaa8\ubc14\uc77c \uc2a4\ud06c\ub864 \uad6c\ud604\n    let touchStartY = 0;\n    let lastTouchY = 0;\n    let lastTouchTime = 0;\n    let velocityY = 0;\n    let momentumRAF = null;\n\n    document.querySelector('.G2').addEventListener('touchstart', function(e) {\n        touchStartY = e.touches[0].clientY;\n        lastTouchY = touchStartY;\n        lastTouchTime = Date.now();\n        velocityY = 0;\n\n        \/\/ \uc9c4\ud589 \uc911\uc778 \uad00\uc131 \uc2a4\ud06c\ub864 \uc911\uc9c0\n        if (momentumRAF) {\n            cancelAnimationFrame(momentumRAF);\n            momentumRAF = null;\n        }\n    }, { passive: true });\n\n    document.querySelector('.G2').addEventListener('touchmove', function(e) {\n        const touchY = e.touches[0].clientY;\n        const deltaY = touchStartY - touchY;\n        const now = Date.now();\n        const elapsed = now - lastTouchTime;\n\n        \/\/ \uc18d\ub3c4 \uacc4\uc0b0\n        if (elapsed > 0) {\n            velocityY = (lastTouchY - touchY) \/ elapsed;\n        }\n\n        window.scrollBy(0, deltaY);\n        touchStartY = touchY;\n        lastTouchY = touchY;\n        lastTouchTime = now;\n    }, { passive: true });\n\n    document.querySelector('.G2').addEventListener('touchend', function() {\n        \/\/ \uad00\uc131 \uc2a4\ud06c\ub864\n        let currentVelocity = velocityY * 15; \/\/ \ucd08\uae30 \uc18d\ub3c4 \uc99d\ud3ed\n        const friction = 0.95; \/\/ \ub9c8\ucc30 \uacc4\uc218 (1\uc5d0 \uac00\uae4c\uc6b8\uc218\ub85d \uc624\ub798 \ubbf8\ub044\ub7ec\uc9d0)\n\n        function momentumScroll() {\n            if (Math.abs(currentVelocity) < 0.5) return;\n\n            window.scrollBy(0, currentVelocity);\n            currentVelocity *= friction;\n            momentumRAF = requestAnimationFrame(momentumScroll);\n        }\n\n        momentumRAF = requestAnimationFrame(momentumScroll);\n    }, { passive: true });\n    \n    function measureTextWidth(text, inputElement) {\n        \/\/ Canvas \uc694\uc18c \uc0dd\uc131\n        const canvas = document.createElement('canvas');\n        const context = canvas.getContext('2d');\n\n        \/\/ \uc785\ub825 \ud544\ub4dc\uc758 \ud3f0\ud2b8 \uc2a4\ud0c0\uc77c \uac00\uc838\uc624\uae30\n        const computedStyle = window.getComputedStyle(inputElement);\n        context.font = `${computedStyle.fontSize} ${computedStyle.fontFamily}`;\n\n        \/\/ \ud14d\uc2a4\ud2b8 \ub108\ube44 \uacc4\uc0b0\n        return context.measureText(text).width;\n    }\n\n    function getCaretCoordinates(input, position) {\n        const div = document.createElement('div');\n        const style = window.getComputedStyle(input);\n\n        \/\/ \ubcf5\uc0ac\ub41c \uc2a4\ud0c0\uc77c \uc801\uc6a9\n        for (const prop of style) {\n            div.style[prop] = style[prop];\n        }\n\n        \/\/ \uc228\uaca8\uc9c4 div \uc124\uc815\n        div.style.position = 'absolute';\n        div.style.visibility = 'hidden';\n        div.style.whiteSpace = 'nowrap';\n        div.style.wordWrap = 'break-word';\n        div.style.overflow = 'hidden'; \/\/ \uc2a4\ud06c\ub864 \ud6a8\uacfc \uc81c\uac70\n        div.style.zIndex=10;\n        div.textContent = input.value.substring(0, position);\n\n        \/\/ \ucee4\uc11c \uc704\uce58 \ud45c\uc2dc\n        const span = document.createElement('span');\n        span.textContent = input.value.substring(position) || '.';\n        div.appendChild(span);\n\n        document.body.appendChild(div);\n\n        \/\/ \uc2a4\ud06c\ub864 \uc624\ud504\uc14b \ubcf4\uc815\n        const { offsetLeft: left, offsetTop: top } = span;\n        const scrollOffset = input.scrollLeft; \/\/ \uc218\ud3c9 \uc2a4\ud06c\ub864 \uac12 \uac00\uc838\uc624\uae30\n        \/\/ console.log(scrollOffset);\n\n        document.body.removeChild(div);\n\n        return { left: left - scrollOffset, top };\n        \/\/ return { left, top };\n    }\n    \n\n\n    const input = document.querySelector('#wp-block-search__input-4'); \/\/ \uc785\ub825\n    const caret = document.querySelector('.custom-caret');\n\n    window.addEventListener('resize', () => {\n        const inputWidth = input.getBoundingClientRect().width;\n        \/\/ console.log(`Input \ub108\ube44: ${inputWidth}px`)\n        const textWidth = measureTextWidth(input.value, input); \/\/ \ud14d\uc2a4\ud2b8 \ub108\ube44 \uacc4\uc0b0\n        \/\/ console.log(`\ud14d\uc2a4\ud2b8 \ub108\ube44: ${textWidth}px`);\n        \/\/ console.log(\"ee\");\n        if (inputWidth > textWidth){\n            caret.style.left = `${textWidth + (input.offsetLeft) + 2}px`; \/\/ \ud14d\uc2a4\ud2b8 \ub108\ube44\uc5d0 \ub530\ub77c \uc704\uce58 \uc870\uc815\n            caret.style.top = `29px`; \/\/\uc785\ub825\uc911\uc77c\ub54c\n        }else \n        if (inputWidth < textWidth){\n            caret.style.left = `${input.offsetLeft+inputWidth -2}px`\n        }\n\n        if (textWidth == 0){\/\/\uc785\ub825\uc911\uc774 \uc544\ub2d0\ub54c\n            caret.style.left = `${(input.offsetLeft)}px`;\n            caret.style.top = `30px`; \n        }\n    });\n\n    input.addEventListener('input', () => {\n        caret.style.display = \"block\";\n        const inputWidth = input.getBoundingClientRect().width;\n        \/\/ console.log(`Input \ub108\ube44: ${inputWidth}px`);\n        const textWidth = measureTextWidth(input.value, input); \/\/ \ud14d\uc2a4\ud2b8 \ub108\ube44 \uacc4\uc0b0\n        \/\/ console.log(`\ud14d\uc2a4\ud2b8 \ub108\ube44: ${textWidth}px`);\n        if (inputWidth > textWidth){\n            const caretPosition = input.selectionStart;\n            const coordinates = getCaretCoordinates(input, caretPosition);\n            caret.style.left = `${input.offsetLeft+coordinates.left}px`;\n            \/\/ caret.style.left = `${textWidth + (input.offsetLeft) + 2}px`; \/\/ \ud14d\uc2a4\ud2b8 \ub108\ube44\uc5d0 \ub530\ub77c \uc704\uce58 \uc870\uc815\n            caret.style.top = `29px`; \/\/\uc785\ub825\uc911\uc77c\ub54c\n        }else \n        if (inputWidth < textWidth){\n            caret.style.left = `${input.offsetLeft+inputWidth -2}px`\n        }\n\n    });\n\n\n    \/\/\ub9c8\uc6b0\uc2a4 \ub4dc\ub798\uadf8\uc2dc \ucee4\uc11c \uc548\ubcf4\uc774\uac8c \ud558\uae30\n    let isDragging = false;\n    input.addEventListener('mousedown', ()=>{\n\n        setTimeout(() => {\n            caret.style.display = \"block\";\n            input.placeholder = \" \" \/\/ \ubbf8\ub9ac \uc785\ub825\ub41c \ud14d\uc2a4\ud2b8 \ube48\uce78\ucc98\ub9ac\n            const caretPosition = input.selectionStart;\n            \/\/ console.log(caretPosition);\n            const coordinates = getCaretCoordinates(input, caretPosition);\n            \/\/ console.log('Caret coordinates:', coordinates.left);\n            caret.style.left = `${input.offsetLeft+coordinates.left}px`;\n        }, 10); \/\/ 10\ubc00\ub9ac\ucd08 = 0.01\ucd08\n\n        isDragging  = true;\n    })\n    input.addEventListener('mouseup', ()=>{\n        isDragging  = false;\n    })\n    input.addEventListener('mousemove', ()=>{\n        if(isDragging){\n            \/\/ console.log(\"\ub4dc\ub798\uadf8\uc911\");\n            caret.style.display = \"none\";\n        }\n    })\n\n    \n    input.addEventListener('keydown', ()=> {\n        const caretPosition = input.selectionStart;\n        const caretPosition2 = input.selectionEnd;\n        const searchBar = document.querySelector('.SearchBar'); \/\/ .SearchBar \uc694\uc18c\n        const paddingLeft = parseFloat(window.getComputedStyle(searchBar).paddingLeft); \/\/ \n\n        const SearchBarwidth = parseFloat(window.getComputedStyle(searchBar).width);\n        const SearchBarwidthMax = (paddingLeft+SearchBarwidth)-2;\n        let coordinates;\n\n        if (event.key === \"ArrowLeft\"){\n            if (caret.style.display == \"none\"){\n                caret.style.display = \"block\";\n                 coordinates = getCaretCoordinates(input, caretPosition);\n            }else\n            if (caret.style.display == \"block\"){\n                 coordinates = getCaretCoordinates(input, caretPosition -1);\n            }\n\n            caret.style.left = `${input.offsetLeft+coordinates.left}px`;\n\n            const _caret = parseFloat(caret.style.left);\n            if (_caret < paddingLeft){\n                \/\/ console.log(\"out\")\n                caret.style.left = `${paddingLeft+1}px`;\n            }\n\n        }\n        if (event.key ===\"ArrowRight\"){\n            if (caret.style.display == \"none\"){\n                caret.style.display = \"block\";\n                coordinates = getCaretCoordinates(input, caretPosition2);\n            }else\n            if (caret.style.display == \"block\"){\n                coordinates = getCaretCoordinates(input, caretPosition2 +1);\n            }\n            caret.style.left = `${input.offsetLeft+coordinates.left}px`;\n\n            \/\/ console.log(caret.style.left)\n            const _caret = parseFloat(caret.style.left);\n            if (_caret > SearchBarwidthMax){\n                \/\/ console.log(\"out\")\n                caret.style.left = `${SearchBarwidthMax}px`;\n            }\n        }\n    })\n\n\n\n    \/\/ \uc774\uc678\uc758 \uacf3\uc744 \ud074\ub9ad\ud588\uc744 \ub54c\n    document.addEventListener('click', (event) => {\n        \/\/ \ud074\ub9ad\ud55c \uc694\uc18c\uac00 input\uc774 \uc544\ub2cc \uacbd\uc6b0\n        if (event.target !== input) {\n            input.placeholder = \" \uac80\uc0c9\uc5b4\ub97c \uc785\ub825\ud558\uc138\uc694.\"; \/\/ placeholder \uac12\uc744 \"tes123\"\uc73c\ub85c \uc124\uc815\n            caret.style.display = \"block\";\n        }\n    });\n\n<\/script>\n\n\n<div class=\"wp-block-group Profile has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/pixelist.kr\/?page_id=8051\"><img loading=\"lazy\" decoding=\"async\" width=\"952\" height=\"952\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/pr.png\" alt=\"\" class=\"wp-image-6399\" style=\"width:40px;height:40px\" title=\"\" srcset=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/pr.png 952w, http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/pr-300x300.png 300w, http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/pr-150x150.png 150w, http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/pr-768x768.png 768w\" sizes=\"auto, (max-width: 952px) 100vw, 952px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group Box3Text TextList has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#0072ce\">\n<div class=\"wp-block-group QueryList TextList has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"background-color:#4e5c6b\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-26 wp-block-group-is-layout-constrained\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-query is-layout-flow wp-block-query-is-layout-flow\">\n<div class=\"wp-block-cover aligncenter\" style=\"min-height:240px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\" style=\"background-color:#0a0f15\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1919\" height=\"617\" class=\"wp-block-cover__image-background wp-image-5930\" alt=\"\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/poster_recapture2.gif\" data-object-fit=\"cover\" title=\"\"><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-large-font-size\"><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>\ud83d\udd79\ufe0f <strong>[\uac8c\uc784\uc7a5\ub974]<\/strong><\/p>\n\n\n\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background is-nowrap is-layout-flex wp-container-core-group-is-layout-28 wp-block-group-is-layout-flex\" style=\"background-color:#223345;padding-top:33px;padding-right:29px;padding-bottom:33px;padding-left:29px\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-27 wp-block-group-is-layout-constrained\" style=\"padding-left:5px\">\n<p style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px);\"><strong><strong><strong><strong>Turn-Based Strategy Game.<\/strong><\/strong><\/strong><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>\ud83d\udcbc <strong>[\uc791\uc5c5\ud30c\ud2b8]<\/strong><\/p>\n\n\n\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-33 wp-block-group-is-layout-constrained\" style=\"background-color:#223345;padding-top:18px;padding-right:29px;padding-bottom:18px;padding-left:29px\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-29 wp-block-group-is-layout-constrained\" style=\"padding-right:5px;padding-left:5px\">\n<p style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px);\">Character.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-30 wp-block-group-is-layout-constrained\" style=\"padding-right:5px;padding-left:5px\">\n<p style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px);\">Object.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-31 wp-block-group-is-layout-constrained\" style=\"padding-left:5px\">\n<p style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px);\">UI.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-32 wp-block-group-is-layout-constrained\" style=\"padding-left:5px\">\n<p style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px);\">Icon.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video controls src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/RECAPTURE.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-left has-base-color has-text-color\"><strong>[<strong><strong>Character<\/strong><\/strong>]<\/strong><\/p>\n\n\n\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"background-color:#5987af\">\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group is-content-justification-center is-layout-flex wp-container-core-group-is-layout-41 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-content-justification-center is-layout-flex wp-container-core-group-is-layout-39 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-36 wp-block-group-is-layout-constrained\" style=\"padding-right:15px;padding-left:15px\">\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/\uc778\uac04\uc815\ucc30\ubcd1.gif\" alt=\"\" style=\"width:160px;height:160px\" title=\"\"><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/\ud654\uc5fc\uac15\ud0c0\ubcd1.gif\" alt=\"\" style=\"width:160px;height:160px\" title=\"\"><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/\uc804\uc7c1\uc6a9\ubcd1.gif\" alt=\"\" style=\"width:217px;height:160px\" title=\"\"><\/figure>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/\uc2e0\uc785\uc131\uae30\uc0ac-\ub2e8\uc6d0.gif\" alt=\"\" style=\"width:316px;height:160px\" title=\"\"><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/\ub291\ub300\uae30\uc218.gif\" alt=\"\" style=\"width:276px;height:160px\" title=\"\"><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/\ube5b\uc758-\uc131\uae30\uc0ac-\uce74\ub860.gif\" alt=\"\" style=\"width:423px;height:160px\" title=\"\"><\/figure>\n\n\n\n<div class=\"wp-block-group is-content-justification-center is-layout-flex wp-container-core-group-is-layout-40 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/\ubca0\ub974\ub2e8.gif\" alt=\"\" style=\"width:160px;height:160px\" title=\"\"><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/\uc544\ud06c\ub2c8\uc0e4.gif\" alt=\"\" style=\"width:207px;height:160px\" title=\"\"><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/\uc9c0\ub8e1.gif\" alt=\"\" style=\"width:160px;height:160px\" title=\"\"><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/poster_recapture-1024x558.png\" alt=\"\" title=\"\"><\/figure>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-left has-base-color has-text-color\"><strong>[<strong><strong>Object<\/strong><\/strong>]<\/strong><\/p>\n\n\n\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"background-color:#5987af\">\n<div class=\"wp-block-group has-background is-content-justification-center is-layout-flex wp-container-core-group-is-layout-44 wp-block-group-is-layout-flex\" style=\"background-color:#5987af\">\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/b02.png\" alt=\"\" style=\"aspect-ratio:1;width:539px;height:auto\" title=\"\"><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/b12.png\" alt=\"\" title=\"\"><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/b22.png\" alt=\"\" title=\"\"><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/b32.png\" alt=\"\" title=\"\"><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/b4.png\" alt=\"\" title=\"\"><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/b5.png\" alt=\"\" title=\"\"><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/b6.png\" alt=\"\" title=\"\"><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-left has-base-color has-text-color\"><strong>[<strong><strong>UI<\/strong><\/strong>]<\/strong><\/p>\n\n\n\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-contrast-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-content-justification-center is-layout-flex wp-container-core-group-is-layout-47 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/\ub808\uc774\uc544\uc6c3-ui-\uc5f0\ucd9c2.mp4\"><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/\uc804\ud22c\uc5f0\ucd9c2.mp4\"><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/\uc778\uac8c\uc784-ui-\uc5f0\ucd9c2.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-left has-base-color has-text-color\"><strong>[<strong><strong>Icon<\/strong><\/strong>]<\/strong><\/p>\n\n\n\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"background-color:#5987af\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-50 wp-block-group-is-layout-constrained\" style=\"padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px\">\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2017\/04\/post_recapture3.png\" alt=\"\" title=\"\"><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-56 wp-block-group-is-layout-constrained\" style=\"background-color:#11161c;padding-top:35px;padding-right:35px;padding-bottom:35px;padding-left:35px\">\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-55 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-53 wp-block-group-is-layout-constrained\" style=\"padding-right:10px\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"952\" height=\"952\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/pr.png\" alt=\"\" class=\"wp-image-6399\" style=\"width:50px;height:50px\" title=\"\" srcset=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/pr.png 952w, http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/pr-300x300.png 300w, http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/pr-150x150.png 150w, http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/pr-768x768.png 768w\" sizes=\"auto, (max-width: 952px) 100vw, 952px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-left is-layout-flex wp-container-core-group-is-layout-54 wp-block-group-is-layout-flex\">\n<p class=\"pixelist-footer-thk has-base-color has-text-color\" style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.469), 20px);font-style:normal;font-weight:600\">Thank you for watching!<\/p>\n\n\n\n<p class=\"has-text-color\" style=\"color:#898989;font-size:14px\">askpixelist@gmail.com<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:37px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group BG has-background has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-59 wp-block-group-is-layout-constrained\" style=\"background-color:#4e5c6b\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group G4 is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-67 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group Box4 has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#15202b\"><\/div>\n\n\n\n<div class=\"wp-block-group Box5 has-background is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-65 wp-block-group-is-layout-flex\" style=\"background-color:#15202b;min-height:121px\">\n<div class=\"wp-block-group LogoS is-nowrap is-layout-flex wp-container-core-group-is-layout-64 wp-block-group-is-layout-flex\" style=\"padding-right:19px;padding-left:57px\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-63 wp-block-group-is-layout-constrained\" style=\"padding-right:7px\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"26\" height=\"26\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/px.png\" alt=\"\" class=\"wp-image-7376\" title=\"\"><\/figure>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"27\" height=\"27\" src=\"http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/x.png\" alt=\"\" class=\"wp-image-7377\" title=\"\"><\/figure>\n<\/div>\n\n\n\n<p class=\"has-text-color\" style=\"color:#5d6167;font-size:13px;line-height:1\">pixel production and research<br>\u24d2 2023~2025 pixelist, ALL RIGHTS RESERVED<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group Box6 has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#15202b\"><\/div>\n<\/div>\n\n\n    <html>\n        <meta name=\"theme-color\" content=\"#f1f1f1\" media=\"(prefers-color-scheme: light)\">\n        <meta name=\"theme-color\" content=\"#f1f1f1\" media=\"(prefers-color-scheme: dark)\">\n\n        <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n        <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">\n        \n        <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR&#038;display=swap\">\n    <style>\n\n    \/* \ub808\uc774\uc544\uc6c3 *\/\n        html, body{\n            overflow-x: hidden !important;\n            overscroll-behavior: none !important;\n        }\n        body {\n            background-color: #3c3c3c; \/* \ud398\uc774\uc9c0 \ubc30\uacbd\uc0c9 *\/\n            font-family: 'Noto Sans KR', sans-serif !important;\n            src: url('noto-sans-kr.woff2') format('woff2') ,\n                url('noto-sans-kr.woff') format('woff') ,\n                url('noto-sans-kr.ttf') format('truetype');\n\n            src: url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR&display=swap') !important;\n            font-display: swap !important;\n        }\n        \/* wp \ubcf8\ubb38 \uc120 1px\ub85c \ub9cc\ub4e4\uae30 *\/\n        hr {\n            border: none !important; \/* \uae30\uc874 \ud14c\ub450\ub9ac \uc81c\uac70 *\/\n            height: 1px; \/* \ub192\uc774\ub97c 1px\ub85c \uc124\uc815 *\/\n            background-color: #b3d5f0; \/* \uc6d0\ud558\ub294 \uc0c9\uc0c1\uc73c\ub85c \uc124\uc815 *\/\n        }\n        \/* \ubd88 \uc774\ubaa8\ud2f0\ucf58 \uc704\uce58 \uc0c1\ub2e8 *\/\n        \/* .Text_icon{\n            align-self: flex-start !important; \n        } *\/\n\n        .wp-block-template-part{\n            display: none !important;\n        }\n        #wp--skip-link--target.wp-block-group.is-layout-flow{\n            margin-top: 0 !important;\n        }\n        .wp-block-group.has-global-padding.is-layout-constrained h1{\n            display: none !important;\n        }\n        .alignwide.wp-block-post-featured-image{\n            display: none !important;\n        }\n\n        \/* \uc67c\ucabd \uba54\ub274 \ucee4\uc2a4\ud140 *\/\n            \/* \ud3ec\ud1a0\uc0f5 *\/\n            #icon_photoshop{\n                position: absolute;\n                top: -86px;\n            }\n            .cat-item.cat-item-40{\n                padding-top: 37px;\n            }   \n            .wp-block-categories-list > .cat-item.cat-item-40 > a { \/* \ud3ec\ud1a0\uc0f5 *\/\n                display: none !important;\n            }\n            \/* \ube14\ub80c\ub354 *\/\n            #icon_blender{\n                position: absolute;\n                top: -86px;\n            }\n            .cat-item.cat-item-44{\n                padding-top: 37px;\n            }        \n            .wp-block-categories-list > .cat-item.cat-item-44 > a { \/* \ube14\ub80c\ub354 *\/\n                \/* \ube14\ub80c\ub354 *\/\n                display: none !important;\n            }\n\n            \/* \uc5d0\uc2be *\/\n            #icon_aseprite{\n                position: absolute;\n                top: -86px;\n            }\n            .cat-item.cat-item-42{\n                padding-top: 37px;\n            }     \n            .wp-block-categories-list > .cat-item.cat-item-42 > a { \/* \uc5d0\uc2be *\/\n                \/* \uc5d0\uc2be *\/\n                display: none !important;\n            }\n\n            \/* \uacf5\ud1b5 \uc218\uc815*\/\n            .cat-item.cat-item-1{\n                display: none !important;\n            }\n            .wp-block-categories-list{\n                z-index: -1;\n                \/* transform: translate(-1px, 0px); *\/\n                padding: 0px !important;\n                margin: 0px !important;\n                border: none !important;\n                \/* list-style-type: none !important; *\/\n                \/* box-sizing: border-box; *\/\n                \/* position: relative; *\/\n            }\n            ul.children{\n                padding-left: 0px;\n            }\n            ul.children > li.cat-item {\n                color: white !important;\n            }\n            ul.children > li.cat-item a{\n                color: white !important;\n            }\n            ul.children > li.cat-item::marker {\n                color: #15202b; \n                width: 2px;\n                font-size: 16px;\n                content: \" \" !important; \n                font-weight: bold;\n            }\n            ul.children > li.cat-item::before {\n                \/* outline: 1px solid red; *\/\n                content: \"|\";\n                color: #3e454d;\n                background-color: #3e454d;\n                font-size: 8px;\n                line-height: 10px;\n                vertical-align: middle;\n                margin-right: 4px;\n\n            }\n            li.cat-item{\n                color: #15202b;\n                font-size: 14px !important;\n                display: block !important;\n            }\n            li.cat-item a{\n                text-decoration: none !important;\n            }\n\n        \/* \ubcf8\ubb38 *\/\n\n        .Box1{\n            align-self: flex-start !important;\n            width: 235px;\n            \/* height: 100em; *\/\n            height: 1949px;\n            flex-shrink: 0;\n        }\n        .Box1_1{\n            position: fixed;\n            z-index: 2;\n            width: 100%;\n            height: 86px;\n            top:0;\n            transform: translate(-419px, 0px);\n        }\n        .Box1_2{\n            position: fixed;\n            z-index: 1;\n            width: 100%;\n            \/* height: 100em; *\/\n            height: 100vh;\n            top:0;\n            transform: translate(-850px, 0px);\n\n\n        }\n        .G2{\n            width: 809px;\n            height: 100%;\n            overflow-y: hidden !important;\n            overflow-x: hidden !important;\n        }\n        .G3{\n            position: fixed;\n            z-index: 4;\n            width: 100%;\n            height: 86px\n        }\n        .Box3{\n            \/* display: flex; *\/\n            display: block;\n            justify-self: flex-start;\n            position: relative;\n            z-index: 2;\n            width: 809px;\n            \/* width: 100%; *\/\n            \/* height: 100em *\/\n            height: 1949px;\n            \/* -webkit-overflow-scrolling: touch; iOS Safari\uc5d0\uc11c \ubd80\ub4dc\ub7ec\uc6b4 \uc2a4\ud06c\ub864 *\/\n            margin-top: 86px !important;\n        }\n        .BG{\n            width: 100%;\n            height: 100%;\n            top: 0;\n            position: fixed;\n            z-index: 1;\n        }\n        .Box4{\n            position: relative;\n            z-index: 1;\n            width: 235px;\n            height: 121px;\n            flex-shrink: 0;\n        }\n        .Box5{\n            position: relative;\n            z-index: 2;\n            width: 809px;\n            height: 121px;\n            flex-shrink: 0;\n        }\n        .Box6{\n            position: absolute;\n            width: 100%;\n            height: 121px;\n            z-index: 1;\n        }\n        \n    \/* \uc11c\uce58\ubc14 \ucee4\uc2a4\ud140 *\/\n        .SearchBar{\n            \/* width: 657px; *\/\n            width: 657px;\n            \/* padding-right: 56px; *\/\n            padding-left: 56px;\n            padding-bottom: 2px;\n            \/* padding-right: 20px; *\/\n            \/* position: absolute;\n            top: 50%;\n            transform: translate(0px, -50%); *\/\n        }\n\n        \/* \uc11c\uce58\ubc14 \ub192\uc774 \uc124\uc815 *\/\n        .SearchBar .wp-block-search__input {\n            height: 50px;\n            padding: 1px;\n        }\n        \/* \uc11c\uce58\ubc14\uc5d0\uc11c x\ubc84\ud2bc \uc228\uae30\uae30 *\/\n        input[type=\"search\"]::-webkit-search-cancel-button {\n            display: none; \/* X \ubc84\ud2bc \uc228\uae30\uae30 *\/\n        }\n        \/* \uc11c\uce58\ubc14 \ubc30\uacbd \uac80\uc740\uc0c9\uc73c\ub85c \uc218\uc815 *\/\n        .SearchBar .wp-block-search__inside-wrapper input {\n            width: 100%;\n            background-color: #11161c !important; \/* \uac80\uc0c9\ubc14 \ubc30\uacbd\uc744 \uac80\uc740\uc0c9\uc73c\ub85c \uc124\uc815 11161c *\/\n            \/* caret-color: #0072ce; *\/\n            caret-color: transparent !important;\n            color: white !important;\n            font-size: 21px !important;\n        }\n\n        \/* \uc11c\uce58\ubc14 \ud14c\ub450\ub9ac \uc81c\uac70 *\/\n        input[type=\"search\"] {\n            border: none !important; \/* \ud14c\ub450\ub9ac \uc81c\uac70 *\/\n            outline: none !important; \/* \ud3ec\ucee4\uc2a4 \uc2dc \ub098\ud0c0\ub098\ub294 \uc678\uacfd\uc120 \uc81c\uac70 *\/\n        }\n        \/* \uc11c\uce58\ubc14 \ud14d\uc2a4\ud2b8 \ubbf8\ub9ac \ud45c\uc2dc *\/\n        .wp-block-search__input::placeholder {\n            color: #37393d; \/* placeholder \ud14d\uc2a4\ud2b8 \uc0c9\uc0c1 *\/\n        }\n\n        \/* \ubaa8\uc11c\ub9ac \ubf40\uc871\ud558\uac8c *\/\n        .wp-block-search__input {\n            border-radius: 0 !important;\n            appearance: none; \/* \uae30\ubcf8 \uc2a4\ud0c0\uc77c \uc81c\uac70 *\/\n            -webkit-appearance: none; \/* WebKit \ube0c\ub77c\uc6b0\uc800 \uae30\ubcf8 \uc2a4\ud0c0\uc77c \uc81c\uac70 *\/\n        }\n\n        .custom-caret {\n            position: absolute;\n            width: 4px; \/* \ucee4\uc2a4\ud140 \uce90\ub7ff \ub450\uaed8 *\/\n            height: 26px; \/* \ucee4\uc2a4\ud140 \uce90\ub7ff \ub192\uc774 *\/\n            background-color: #0072ce; \/* \ucee4\uc2a4\ud140 \uce90\ub7ff \uc0c9\uc0c1 *\/\n            animation: blink 1s steps(2, start) infinite; \/* \uae5c\ubc15\uc784 \uc560\ub2c8\uba54\uc774\uc158 *\/\n            top: 29px;\n        }\n\n        .Logo{\n            position: fixed;\n            z-index: 2;\n            top: 0;\n            transform: translate(-488px, 32px);\n        }\n        .Logo img{\n            display: block;\n        }\n\n        .Menu{\n            position: fixed;\n            z-index: 2;\n            top: 0;\n            transform: translate(-499px, 86px);\n        }\n        \n        .Profile{\n            \/* position: fixed; *\/\n            \/* right: 29px; *\/\n            padding-left: 56px;\n        }\n\n        .QueryList{\n            padding-top: 34px;\n            \/* padding-top: 120px; *\/\n            padding-left: 57px;\n        }\n\n        .Title {\n            height: 41.47px !important;\n        }\n        .Title a{\n            color: white;\n            text-decoration: none !important;\n            font-size: 20px !important;\n\n            word-wrap: break-word; \/* \ud14d\uc2a4\ud2b8\uac00 \ub118\uce60 \uacbd\uc6b0 \uc904\ubc14\uafc8 *\/\n            overflow-wrap: break-word; \/* \ucd5c\uc2e0 \ud45c\uc900 \uc18d\uc131 *\/\n            display: -webkit-box; \/* Flexbox \uae30\ubc18 \ub808\uc774\uc544\uc6c3 *\/\n            -webkit-box-orient: vertical; \/* \uc138\ub85c \ubc29\ud5a5 \uc815\ub82c *\/\n            -webkit-line-clamp: 1; \/* \ucd5c\ub300 3\uc904\uae4c\uc9c0\ub9cc \ud45c\uc2dc *\/\n            overflow: hidden; \/* \ub118\uce58\ub294 \ud14d\uc2a4\ud2b8 \uc228\uae40 *\/\n            text-overflow: ellipsis; \/* \ub9d0\uc904\uc784\ud45c(...) \ucd94\uac00 *\/\n\n        }\n\n        .Summation{\n            width: 524px;\n            height: 60.89px;\n            \n            font-size: 14px !important;\n            line-height: 1.45 !important;\n            margin-bottom: 6px !important;\n            margin-right: 31px !important;\n            \n\n            word-wrap: break-word; \/* \ud14d\uc2a4\ud2b8\uac00 \ub118\uce60 \uacbd\uc6b0 \uc904\ubc14\uafc8 *\/\n            overflow-wrap: break-word; \/* \ucd5c\uc2e0 \ud45c\uc900 \uc18d\uc131 *\/\n            display: -webkit-box; \/* Flexbox \uae30\ubc18 \ub808\uc774\uc544\uc6c3 *\/\n            -webkit-box-orient: vertical; \/* \uc138\ub85c \ubc29\ud5a5 \uc815\ub82c *\/\n            -webkit-line-clamp: 3; \/* \ucd5c\ub300 3\uc904\uae4c\uc9c0\ub9cc \ud45c\uc2dc *\/\n            overflow: hidden; \/* \ub118\uce58\ub294 \ud14d\uc2a4\ud2b8 \uc228\uae40 *\/\n            text-overflow: ellipsis; \/* \ub9d0\uc904\uc784\ud45c(...) \ucd94\uac00 *\/\n        }\n        .Summation:hover{\n            cursor: pointer;\n        }\n\n        .TextDate{\n            height: 20.8px;\n            font-size: 13px !important;\n        }\n        .TextDate:hover{\n            cursor: pointer;\n        }\n\n        .PageNumber{\n            height: 11px;\n            word-spacing: 22px; \n            padding-bottom: 12px;\n        }\n\n        .PageNumber a{\n            text-decoration: none !important;\n        }\n\n        .SearchResults{\n            padding-left: 57px;\n        }\n\n        .SearchResults h1{\n            font-size: 20px;\n        }\n        \n        .NothingSearch{\n            margin-top: 0;\n            font-size: 20px !important;\n        }\n\n        .SubLogo{\n            display: none !important;\n            margin-left: 29px !important;\n            margin-right: 21px !important;\n            margin-bottom: 3px !important;\n        }\n        .SubLogo:hover{\n            cursor: pointer;\n        }\n\n        \/* PR *\/\n        .MenuPR{\n            position: fixed;\n            z-index: 2;\n            top: 0;\n            transform: translate(-467px, 86px);\n            height: calc(100% - 120px);\n            overflow-y: scroll;\n            display: block !important;\n            scrollbar-width: none;\n        }\n        .MenuPR::-webkit-scrollbar{\n            display: none;\n        }\n        .ProjectName a{\n            text-decoration: none !important;\n        }\n        .ProjectArea{\n            height: 25px !important\n        }\n\n        .Box3PR{\n            \/* display: flex; *\/\n            display: block;\n            justify-self: flex-start;\n            position: relative;\n            z-index: 2;\n            width: 829px;\n            \/* width: 100%; *\/\n            \/* height: 100em *\/\n            height: 1949px;\n            \/* -webkit-overflow-scrolling: touch; iOS Safari\uc5d0\uc11c \ubd80\ub4dc\ub7ec\uc6b4 \uc2a4\ud06c\ub864 *\/\n            margin-top: 86px !important;\n        }\n        .QueryListPR{\n            padding-top: 38px;\n            \/* padding-top: 120px; *\/\n            padding-left: 53px;\n        }\n        .QueryListPR ul{\n            margin-left: 0;\n            margin-right: 0;\n        }\n        .TextBox:hover{\n            cursor: pointer;\n        }\n\n        .TextList li{\n            min-width: 0;\n            \/* padding-right: 13px; *\/\n            padding-bottom: 13px;\n        }\n\n        .TextListPR{\n            gap: 0px !important;\n            \/* row-gap: 18px !important; *\/\n            \/* column-gap: 15px !important; *\/\n        }\n        .TextListPR li{\n            width: 240px;\n            padding-right: 13px;\n            height: 192px !important;\n\n        }\n        .TextImagePR{\n            margin-bottom: 0;\n            width: 100% !important;\n        }\n\n        .Box3Text{\n            \/* display: flex; *\/\n            display: block;\n            justify-self: flex-start;\n            position: relative;\n            z-index: 2;\n            width: 809px;\n            \/* width: 100%; *\/\n            \/* height: 100em *\/\n            \/* height: 1949px; *\/\n            \/* -webkit-overflow-scrolling: touch; iOS Safari\uc5d0\uc11c \ubd80\ub4dc\ub7ec\uc6b4 \uc2a4\ud06c\ub864 *\/\n            margin-top: 86px !important;\n        }\n\n        @keyframes blink {\n            to {\n                visibility: hidden;\n            }\n        }\n\n    \/* \ubc18\uc751\ud615 *\/\n        @media (max-width: 1150px) {\n            .icon_photoshop{\n                padding-left: 0px !important;\n            }\n            .icon_blender{\n                \/* transform: translate(0px,53px); *\/\n            }\n            .icon_aseprite{\n                \/* transform: translate(0px,235px); *\/\n            }\n            .G1{\n                justify-content: flex-start !important;\n            }\n            .Box1{\n                width: 254px;\n            }\n            .Box1_1{\n                width: 254px;\n                transform: translate(0px, 0px);\n            }\n            .Box1_2{\n                width: 254px;\n                transform: translate(0px, 0px);\n            }\n\n            .G3{\n                justify-content: flex-start !important;\n                align-items: center !important;\n            }\n            .Box3{\n                width: 100%;\n            }\n\n            .SearchBar{\n                width: calc(100% - 409px);\n                \/* padding-right: 56px; *\/\n                padding-left: 30px;\n            }\n            \n            .Logo{\n                transform: translate(29px, 32px);\n            }\n\n            .Menu{\n                transform: translate(29px, 86px);\n            }\n\n            .Profile{\n                \/* position: fixed; *\/\n                \/* right: 29px; *\/\n                \/* padding-left: 26px; *\/\n            }\n\n            \/* \ubcf8\ubb38 \ub108\ube44 \uc790\ub3d9 \uc904\uc774\uae30\ub294 \uc0c1\uc704 \ubd80\ubaa8\ub4e4 min-width\uac00 0\uc774\uc5b4\uc57c\ud568 *\/\n            .G2{\n                min-width: 0;\n            }\n            .TextList{\n                min-width: 0;\n            }\n            \/* .TextList li{\n                min-width: 0;\n                padding-right: 13px;\n                padding-bottom: 13px;\n            } *\/\n            .TextList .Summation{\n                min-width: 0;\n            }\n            .TextList .Summation p{\n                min-width: 0;\n            }\n            \/* px\ub85c \uace0\uc804\ub41c \ub108\ube44 %\ub85c \uc218\uc815 *\/\n            .G2{\n                width: 100%;\n            }\n            .QueryList{\n                padding-left: 30px !important;\n                padding-right: 29px !important;\n            }\n            .TextBox{\n                padding-right: 32px !important;\n            }\n\n            .Summation{\n                width: 100%;\n            }\n\n            \/* \ud558\ub2e8 \ud478\ud130 *\/\n            .G4{\n                justify-content: flex-start !important;\n            }\n            .Box4{\n                width: 254px;\n                \/* transform: translate(0px, 0px); *\/\n            }\n            .SearchResults{\n                padding-right: 29px;\n            }\n\n            \/* PR *\/\n            .MenuPR{\n                transform: translate(29px, 86px);\n            }\n            .QueryListPR{\n                width: 100%;\n                padding-left: 30px !important;\n                padding-right: 29px !important;\n            }\n\n            .Box3PR{\n                width: 100%;\n                padding-right: 44px;\n            }\n            .Box3Text{\n                width: 100%;\n            }\n\n        }\n        \/* \uc67c\ucabd \ubc15\uc2a4 \uc587\uac8c \ub9cc\ub4e4\uae30 *\/\n        @media (max-width: 990px){\n            .Box1{\n                width: 158px;\n            }\n            .Box1_1{\n                width: 158px;\n            }\n            .Box1_2{\n                width: 158px;\n            }\n            .MenuPR{\n                transform: translate(63px, 86px) !important;\n            }\n            .SearchBar{\n                width: calc(100% - 313px);\n                \/* padding-right: 56px; *\/\n                \/* padding-left: px; *\/\n            }\n            .Profile{\n                \/* position: fixed; *\/\n                \/* right: 29px; *\/\n                \/* padding-left: 26px; *\/\n            }\n            .Box4{\n                width: 158px;\n            }\n            .ProjectName{\n                display: none !important;\n            }\n        }\n        \/* \uc67c\ucabd \ubc15\uc2a4 1\uc790 *\/\n        @media (max-width: 682px){\n            .Box1{\n                display: none;\n            }\n            .Box1_1{\n                display: none;\n            }\n            .Box1_2{\n                \/* \uc560\ub2c8\uba54\uc774\uc158 *\/\n                left: -300px; \/* \ud654\uba74 \uc67c\ucabd \ubc16\uc73c\ub85c \uc228\uae40 *\/\n                transition: left 0.5s ease; \/* \ubd80\ub4dc\ub7ec\uc6b4 \uc560\ub2c8\uba54\uc774\uc158 *\/\n\n            }\n            .Box1_2.active{\n                left: 0;\n            }\n\n            .Menu{\n                \/* \uc560\ub2c8\uba54\uc774\uc158 *\/\n                left: -300px; \/* \ud654\uba74 \uc67c\ucabd \ubc16\uc73c\ub85c \uc228\uae40 *\/\n                transition: left 0.5s ease; \/* \ubd80\ub4dc\ub7ec\uc6b4 \uc560\ub2c8\uba54\uc774\uc158 *\/\n            }\n\n            .Menu.active{\n                left: 0;\n            }\n            .P_BG{\n                display: none;\n                position: fixed; \/* \ud654\uba74\uc5d0 \uace0\uc815 *\/\n                top: 0;          \/* \uc0c1\ub2e8\ubd80\ud130 \uc2dc\uc791 *\/\n                left: 0;         \/* \uc67c\ucabd\ubd80\ud130 \uc2dc\uc791 *\/\n                width: 100%;     \/* \ud654\uba74 \ub108\ube44 \uc804\uccb4 *\/\n                height: 100%;    \/* \ud654\uba74 \ub192\uc774 \uc804\uccb4 *\/\n                background-color: rgba(0, 0, 0, 0.5); \/* \ubc18\ud22c\uba85 \uac80\uc740\uc0c9 \ubc30\uacbd *\/\n                z-index: 3;   \/* \ub2e4\ub978 \uc694\uc18c \uc704\uc5d0 \ud45c\uc2dc *\/\n\n                pointer-events: all;\n            }\n            .P_BG.active{\n                display: block;\n            }\n\n            .Logo{\n                display: none;\n                \/* width: 15px;\n                height: 20px;\n                content: url(\"http:\/\/pixelist.kr\/wp-content\/uploads\/2025\/02\/p-1.png\"); *\/\n            }\n            .SearchBar{\n                padding-left: 0px;\n                width: calc(100% - 145px) !important;\n            }\n            .Box3{\n                height: 100%;\n            }\n            .Box3PR{\n                height: 100%;\n            }\n            .Box4{\n                display: none;\n            }\n            .SubLogo{\n                display: block !important;\n            }\n            .Profile{\n                padding-left: 21px;\n            }\n            .QueryList{\n                padding-left: 30px !important;\n                padding-right: 19px !important;\n            }\n            .G4{\n                justify-content: center !important;\n            }\n            .Box5{\n                justify-content: center !important;\n            }\n            .Box6{\n                display: none;\n            }\n            .LogoS{\n                padding-left: 0px !important;\n            }\n\n            \/* PR *\/\n            .MenuPR{\n                \/* \uc560\ub2c8\uba54\uc774\uc158 *\/\n                left: -300px; \/* \ud654\uba74 \uc67c\ucabd \ubc16\uc73c\ub85c \uc228\uae40 *\/\n                transition: left 0.5s ease; \/* \ubd80\ub4dc\ub7ec\uc6b4 \uc560\ub2c8\uba54\uc774\uc158 *\/\n            }\n\n            .MenuPR.active{\n                left: 0;\n            }\n\n\n        }\n\n        \/* PR \ubcf8\ubb38 \uc774\ubbf8\uc9c0 \ub192\uc774 \uc218\uc815 *\/\n        @media (max-width: 600px){\n            .TextList li{\n                padding-bottom: 38px;\n            }\n        }\n        \n        @media (max-width: 414px){\n            .TextImage{\n                width: 123px !important;\n            }\n            .TextBox{\n                padding-right: 20px !important;\n            }\n\n            .LogoS{\n                display: none !important;\n            }\n        }\n\n    <\/style>\n\n    <script>\n\n        \/\/ \ubaa9\ucc28 \uc544\uc774\ucf58 \uc704\uce58 \uc870\uc808\n        const elements = document.querySelectorAll('ul.children');\n\n        \/\/ \uc774\ubbf8\uc9c0 \ubc30\uc5f4 (\uc774\ubbf8\uc9c0 A, B, C)\n        const images = [document.getElementById('icon_photoshop'), \n                        document.getElementById('icon_blender'), \n                        document.getElementById('icon_aseprite')];\n\n        \/\/ ui.children\uacfc \uc774\ubbf8\uc9c0 \uac1c\uc218\uac00 \uc77c\uce58\ud558\ub294\uc9c0 \ud655\uc778\n        if (elements.length !== images.length) {\n            console.log(elements.length)\n            console.log(images.length)\n        console.error('ui.children \uc694\uc18c\uc640 \uc774\ubbf8\uc9c0\uc758 \uac1c\uc218\uac00 \uc77c\uce58\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.');\n        } else {\n        \/\/ \uac01 ui.children \uc694\uc18c\uc5d0 \ub300\ud574 \ubc18\ubcf5\n        elements.forEach((element, index) => {\n            \/\/ DOMRect \uac1d\uccb4\ub97c \uac00\uc838\uc624\uae30\n            \/\/ const rect = element.getBoundingClientRect();\n\n            \/\/ \ubb38\uc11c \uae30\uc900 Y \uc88c\ud45c \uacc4\uc0b0\n            \/\/ const yCoordinate = rect.top + window.scrollY;\n            \/\/ const yCoordinate = rect.top;\n            const yCoordinate = element.getBoundingClientRect().y;\n\n            console.log(yCoordinate);\n            const offset = 10; \/\/ \uc6d0\ud558\ub294 \ub9cc\ud07c \uc704\ub85c \uc774\ub3d9 (\uc608: 50px)\n\n            \/\/ images[index].setAttribute(\n            \/\/     'style',\n            \/\/     `position: absolute; \n            \/\/      top: -86px; \n            \/\/      transform: translate(0px, ${yCoordinate-35}px) !important`\n                 \n            \/\/ )\n            images[index].style.transform = `translate(0px, ${yCoordinate-35}px)`;\n\n\n            \/\/ images[index].style.position = `fixed`;\n            \/\/ images[index].style.top = `0`;\n            \/\/ \/\/ images[index].style.paddingTop = \"37px\";\n            \/\/ images[index].style.transform = `translate(0px, ${yCoordinate-35}px)`;\n\n            \/\/ images[index].style.top = `${yCoordinate-offset}px`;\n\n\n            \/\/ \ud574\ub2f9 \uc774\ubbf8\uc9c0\uc758 transform \uc870\uc808 (\uc704\ub85c \uc774\ub3d9)\n            \/\/ \/\/ images[index].style.transform = `translate(2px, ${yCoordinate - offset}px)`;\n            \/\/ images[index].style.position = 'absolute'; \/\/ \uc704\uce58 \uc870\uc815\uc744 \uc704\ud574 position \uc124\uc815\n            \/\/ images[index].style.top = `${yCoordinate-(82+86) - offset}px`;\n\n            \/\/ console.log(`\uc774\ubbf8\uc9c0 ${index + 1}\uc758 Y \uc88c\ud45c\uac00 ${yCoordinate - offset}px\ub85c \uc124\uc815\ub418\uc5c8\uc2b5\ub2c8\ub2e4.`);\n        });\n        }\n\n        \/\/ p\ubc84\ud2bc\n        document.querySelector('.SubLogo').addEventListener('click', function() {\n            const box = document.querySelector(\".Box1_2\");\n            const menuElement = document.querySelector(\".Menu\");\n            const menuElement2 = document.querySelector(\".MenuPR\");\n            const bg = document.querySelector(\".P_BG\")\n\n            \/\/ active \ud074\ub798\uc2a4 \ud1a0\uae00\n            box.style.zIndex = '4';\n            box.classList.toggle(\"active\");\n            bg.classList.toggle(\"active\");\n\n            if (menuElement){\n                menuElement.style.zIndex = '4';\n                menuElement.classList.toggle(\"active\");\n            }\n            if (menuElement2){\n                menuElement2.style.zIndex = '4';\n                menuElement2.classList.toggle(\"active\");\n            }\n\n        });\n        \/\/p_bg \ubc84\ud2bc\n        document.querySelector('.P_BG').addEventListener('click', function() {\n            \/\/ console.log('Clicked outside of .SubLogo');\n            \/\/ \uc5ec\uae30\uc5d0 \uc6d0\ud558\ub294 \ub3d9\uc791\uc744 \ucd94\uac00\ud558\uc138\uc694\n            const box = document.querySelector(\".Box1_2\");\n            const menuElement = document.querySelector(\".Menu\");\n            const menuElement2 = document.querySelector(\".MenuPR\");\n            const bg = document.querySelector(\".P_BG\")\n\n            \/\/ box.style.zIndex = '2';\n            box.classList.remove(\"active\");\n            bg.classList.remove(\"active\");\n\n            if (menuElement){\n                \/\/ menuElement.style.zIndex = '2';\n                menuElement.classList.remove(\"active\");\n            }\n            if (menuElement2){\n                \/\/ menuElement2.style.zIndex = '2';\n                menuElement2.classList.remove(\"active\");\n            }\n            \n        })\n\n        \/\/ p\ubc84\ud2bc\uc744 \ub204\ub974\uace0 \uc0ac\uc774\uc988 \ubcc0\uacbd\uc2dc\n        window.addEventListener('resize', function() {\n            isFirstClick = true;\n            \/\/ \ud604\uc7ac \ube0c\ub77c\uc6b0\uc800\uc758 width \uac12 \uac00\uc838\uc624\uae30\n            const currentWidth = window.innerWidth;\n\n            \/\/ width\uac00 682 \uc774\uc0c1\uc77c \uacbd\uc6b0 \uc2e4\ud589\n            if (currentWidth >= 682) {\n                const menuElement = document.querySelector('.Menu');\n                if (menuElement) {\n                    menuElement.style.zIndex = '2';\n                }\n                const menuElement2 = document.querySelector('.MenuPR');\n                if (menuElement2) {\n                    menuElement2.style.zIndex = '2';\n                }\n\n                const boxElement = document.querySelector('.Box1_2');\n                if (boxElement) {\n                    boxElement.style.display = 'block';\n                    boxElement.style.zIndex = '1';\n                }\n            }\n        });\n\n        \/\/ \uae00\uc694\uc57d, \uae00 \ub0a0\uc9dc \ud074\ub9ad\ub3c4 \ud574\ub2f9 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\n        document.addEventListener('click', function (event) {\n        \/\/ console.log(event.target)\n        \/\/ if (event.target.classList.contains('wp-container')) {\n            let currentElement = event.target; \/\/ \ud074\ub9ad\ub41c \uc694\uc18c\ub97c \uac00\uc838\uc634\n\n            \/\/ \uc0c1\uc704 \uc694\uc18c\ub97c \ud0d0\uc0c9\ud558\uba70 <li> \ud0dc\uadf8\ub97c \ucc3e\uc74c\n            while (currentElement && currentElement.tagName.toLowerCase() !== 'li') {\n                currentElement = currentElement.parentElement; \/\/ \ubd80\ubaa8 \uc694\uc18c\ub85c \uc774\ub3d9\n            }\n\n            \/\/ <li> \ud0dc\uadf8\ub97c \ucc3e\uc558\uc73c\uba74 \ucd9c\ub825\n            if (currentElement && currentElement.tagName.toLowerCase() === 'li') {\n                const classList = currentElement.className.split(' ');\n                const postClass = classList.find(cls => cls.startsWith('post-'));\n\n                if (postClass) {\n                    const postId = postClass.replace('post-', '');\n                    if (!isNaN(postId)) {\n                        const url = `https:\/\/pixelist.kr\/?p=${postId}`;\n                        \/\/ console.log(`Navigating to: ${url}`);\n                        window.location.href = url;\n                    }\n                }\n            }\n        \/\/ }\n        });\n\n    <\/script>\n\n\n    <\/html>","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd79\ufe0f [\uac8c\uc784\uc7a5\ub974] Turn-Based Strategy Game. \ud83d\udcbc [\uc791\uc5c5\ud30c\ud2b8] Character. Object. UI. Icon. [Character] [Object] [UI] [Icon] Thank you for watching! askpixelist@gmail.com pixel production and research\u24d2 2023~2025 pixelist, ALL RIGHTS RESERVED<\/p>\n","protected":false},"author":1,"featured_media":5086,"comment_status":"open","ping_status":"open","sticky":false,"template":"blank","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[38],"class_list":["post-2158","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-basic","tag-portfolio"],"_links":{"self":[{"href":"http:\/\/pixelist.kr\/index.php?rest_route=\/wp\/v2\/posts\/2158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/pixelist.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/pixelist.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/pixelist.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/pixelist.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2158"}],"version-history":[{"count":74,"href":"http:\/\/pixelist.kr\/index.php?rest_route=\/wp\/v2\/posts\/2158\/revisions"}],"predecessor-version":[{"id":9834,"href":"http:\/\/pixelist.kr\/index.php?rest_route=\/wp\/v2\/posts\/2158\/revisions\/9834"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/pixelist.kr\/index.php?rest_route=\/wp\/v2\/media\/5086"}],"wp:attachment":[{"href":"http:\/\/pixelist.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pixelist.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2158"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pixelist.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}