{"id":43,"date":"2026-06-08T07:54:52","date_gmt":"2026-06-08T07:54:52","guid":{"rendered":"https:\/\/darkviolet-marten-825083.hostingersite.com\/?page_id=43"},"modified":"2026-06-08T08:25:05","modified_gmt":"2026-06-08T08:25:05","slug":"%ec%a0%9c%ed%92%88%ec%86%8c%ea%b0%9c","status":"publish","type":"page","link":"https:\/\/darkviolet-marten-825083.hostingersite.com\/%ec%a0%9c%ed%92%88%ec%86%8c%ea%b0%9c\/","title":{"rendered":"\uc81c\ud488\uc18c\uac1c"},"content":{"rendered":"    <!-- \uc678\ubd80 \uc560\ub2c8\uba54\uc774\uc158 \ub77c\uc774\ube0c\ub7ec\ub9ac -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n    <style>\r\n        \/* =========================================\r\n           ROOT & RESET (B.LANDING \ubc1d\uc740 \ud14c\ub9c8)\r\n        ========================================= *\/\r\n        .cp-wrap {\r\n            --c-bg: #fdfdfd; \r\n            --c-bg-soft: #ffffff;\r\n            --c-primary: #FF3366; \r\n            --c-secondary: #00E5FF; \r\n            --c-tertiary: #FFE600; \r\n            --c-purple: #8A2BE2;\r\n            --c-text-main: #111111;\r\n            --c-text-muted: #555555;\r\n\r\n            font-family: 'Pretendard', -apple-system, sans-serif;\r\n            background-color: var(--c-bg);\r\n            color: var(--c-text-main);\r\n            width: 100%;\r\n            margin-top: -80px; \r\n            position: relative;\r\n        }\r\n\r\n        .cp-wrap * { box-sizing: border-box; margin: 0; padding: 0; }\r\n        .cp-wrap img { max-width: 100%; height: auto; display: block; }\r\n        \r\n        .cp-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 10; }\r\n        \r\n        \/* \ubc30\uacbd 3D \ub5a0\ub2e4\ub2c8\ub294 \uc624\ube0c\uc81d\ud2b8 *\/\r\n        .cp-bg-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; }\r\n        .cp-shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.25; animation: floatObj3 15s infinite alternate ease-in-out; }\r\n        .cp-shape-1 { width: 500px; height: 500px; background: var(--c-secondary); top: 10%; left: -100px; animation-delay: -2s; }\r\n        .cp-shape-2 { width: 600px; height: 600px; background: var(--c-primary); top: 60%; right: -200px; animation-delay: -7s; }\r\n        @keyframes floatObj3 { \r\n            0% { transform: translate(0, 0) scale(1) rotate(0deg); } \r\n            100% { transform: translate(-80px, 120px) scale(1.1) rotate(-10deg); } \r\n        }\r\n\r\n        \/* =========================================\r\n           1. HERO SECTION\r\n        ========================================= *\/\r\n        .cp-hero {\r\n            min-height: 85vh; \r\n            display: flex; align-items: center; justify-content: center;\r\n            position: relative; z-index: 2; padding-top: 80px;\r\n            background: #000;\r\n            overflow: hidden; \r\n        }\r\n        .cp-hero-bg {\r\n            position: absolute; top: 0; left: 0; width: 100%; height: 130%;\r\n            background: url('https:\/\/images.unsplash.com\/photo-1542744094-3a31f272c490?q=80&w=1920&auto=format&fit=crop') center\/cover no-repeat;\r\n            opacity: 0.4; transform: translateY(0); z-index: 1;\r\n            animation: bgZoom 20s ease-in-out infinite alternate;\r\n        }\r\n        @keyframes bgZoom { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }\r\n        \r\n        .cp-hero-overlay {\r\n            position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n            background: linear-gradient(to bottom, rgba(18,18,18,0.1) 0%, rgba(18,18,18,1) 100%);\r\n            z-index: 2;\r\n        }\r\n        .cp-hero-content { position: relative; z-index: 3; text-align: center; }\r\n        \r\n        .cp-hero-subtitle {\r\n            display: inline-block; padding: 8px 25px; \r\n            background: rgba(0, 229, 255, 0.1); color: #00b8cc;\r\n            font-size: 1.1rem; font-weight: 800; border-radius: 50px; letter-spacing: 0.1em;\r\n            margin-bottom: 30px; border: 1px solid rgba(0, 229, 255, 0.3);\r\n            animation: pulseShadow3 2s infinite;\r\n        }\r\n        @keyframes pulseShadow3 { 0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.2); } 70% { box-shadow: 0 0 0 15px rgba(0, 229, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); } }\r\n        \r\n        .cp-hero-title {\r\n            font-size: clamp(2.5rem, 6vw, 4.5rem); \r\n            font-weight: 900; line-height: 1.2;\r\n            color: #ffffff; \r\n            letter-spacing: -0.03em;\r\n            white-space: nowrap; \r\n        }\r\n        .cp-hero-title span { \r\n            background: linear-gradient(to right, var(--c-primary), var(--c-purple), var(--c-secondary));\r\n            background-size: 200% auto;\r\n            -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n            animation: gradientText3 5s linear infinite;\r\n        }\r\n        @keyframes gradientText3 { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }\r\n\r\n        \/* =========================================\r\n           2. PRODUCT BOARD SECTION\r\n        ========================================= *\/\r\n        .cp-board { padding: 100px 0 150px; position: relative; z-index: 5; }\r\n        \r\n        .cp-filter {\r\n            display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 60px;\r\n        }\r\n        .cp-filter-btn {\r\n            padding: 12px 30px; background: transparent; border: 2px solid rgba(0,0,0,0.1);\r\n            border-radius: 50px; font-size: 1.1rem; font-weight: 800; color: var(--c-text-muted);\r\n            cursor: pointer; transition: all 0.3s ease;\r\n        }\r\n        .cp-filter-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }\r\n        .cp-filter-btn.active {\r\n            background: var(--c-primary); border-color: var(--c-primary); color: #fff;\r\n            box-shadow: 0 10px 20px rgba(255,51,102,0.2);\r\n        }\r\n\r\n        .cp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }\r\n\r\n        .cp-card {\r\n            background: var(--c-bg-soft); border-radius: 25px; overflow: hidden;\r\n            box-shadow: 0 15px 35px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.03);\r\n            cursor: pointer; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n            position: relative;\r\n        }\r\n        .cp-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.1); }\r\n\r\n        .cp-thumb { width: 100%; aspect-ratio: 4 \/ 3; overflow: hidden; position: relative; }\r\n        .cp-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }\r\n        .cp-card:hover .cp-thumb img { transform: scale(1.08); }\r\n        \r\n        .cp-thumb-overlay {\r\n            position: absolute; inset: 0; background: rgba(0,0,0,0.5);\r\n            display: flex; align-items: center; justify-content: center;\r\n            opacity: 0; transition: opacity 0.4s ease;\r\n        }\r\n        .cp-card:hover .cp-thumb-overlay { opacity: 1; }\r\n        .cp-thumb-overlay span {\r\n            padding: 10px 25px; background: #fff; color: var(--c-primary);\r\n            font-weight: 800; border-radius: 30px; transform: translateY(20px);\r\n            transition: transform 0.4s ease;\r\n        }\r\n        .cp-card:hover .cp-thumb-overlay span { transform: translateY(0); }\r\n\r\n        .cp-info { padding: 30px 25px; }\r\n        .cp-info-cat { font-size: 0.9rem; font-weight: 800; color: var(--c-primary); margin-bottom: 10px; display: block; text-transform: uppercase; }\r\n        .cp-info-title { font-size: 1.5rem; font-weight: 900; color: var(--c-text-main); margin-bottom: 10px; line-height: 1.3; }\r\n        .cp-info-desc { font-size: 1rem; color: var(--c-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\r\n\r\n        \/* =========================================\r\n           3. FULL-SCREEN MODAL\r\n        ========================================= *\/\r\n        .cp-modal {\r\n            position: fixed; \r\n            top: 80px; \r\n            left: 0; \r\n            width: 100vw; \r\n            height: calc(100vh - 80px);\r\n            background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px);\r\n            z-index: 9999; \r\n            display: flex; justify-content: flex-end; \r\n            opacity: 0; pointer-events: none; transition: opacity 0.4s ease;\r\n        }\r\n        .cp-modal.active { opacity: 1; pointer-events: auto; }\r\n\r\n        .cp-modal-content {\r\n            width: 100%; max-width: 900px; height: 100%;\r\n            background: #151515; \r\n            overflow-y: auto;\r\n            transform: translateX(100%); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n            position: relative;\r\n        }\r\n        .cp-modal.active .cp-modal-content { transform: translateX(0); }\r\n\r\n        .cp-modal-close {\r\n            position: absolute; top: 30px; right: 30px;\r\n            width: 50px; height: 50px; \r\n            background: rgba(255,255,255,0.1); color: #fff;\r\n            border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n            font-size: 1.5rem; cursor: pointer; z-index: 10; border: none; transition: background 0.3s;\r\n        }\r\n        .cp-modal-close:hover { background: #FF3366; }\r\n\r\n        .cp-detail-img { width: 100%; height: 500px; object-fit: cover; }\r\n        .cp-detail-body { padding: 60px; }\r\n        \r\n        \/* \ud83d\udea8 \ud655\uc2e4\ud55c \ud3ec\uc778\ud2b8 \ubc84\ud2bc \uc2a4\ud0c0\uc77c: \ubcc0\uc218 \uc758\uc874\uc131 \uc81c\uac70, \uc9c1\uc811 \uceec\ub7ec \ud558\ub4dc\ucf54\ub529 *\/\r\n        .cp-detail-cat { \r\n            display: inline-block; \r\n            padding: 8px 20px; \r\n            background-color: #FF3366 !important; \/* \ud56b\ud551\ud06c \uc0c9\uc0c1 \uac15\uc81c \uace0\uc815 *\/\r\n            color: #ffffff !important; \r\n            font-weight: 800; \r\n            font-size: 0.95rem;\r\n            border-radius: 50px; \r\n            margin-bottom: 20px; \r\n            letter-spacing: 0.05em;\r\n            text-transform: uppercase;\r\n            box-shadow: 0 4px 15px rgba(255, 51, 102, 0.3); \/* \uc740\uc740\ud55c \ubc84\ud2bc \uadf8\ub9bc\uc790 *\/\r\n        }\r\n        \r\n        .cp-detail-title { font-size: 3rem; font-weight: 900; color: #ffffff; margin-bottom: 30px; line-height: 1.2; }\r\n        .cp-detail-desc { font-size: 1.2rem; line-height: 1.8; color: #dddddd; margin-bottom: 40px; }\r\n        \r\n        .cp-detail-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; background: #222222; padding: 40px; border-radius: 20px; }\r\n        .cp-spec-item h5 { font-size: 1rem; color: #aaaaaa; margin-bottom: 10px; text-transform: uppercase; }\r\n        .cp-spec-item p { font-size: 1.1rem; font-weight: 700; color: #ffffff; }\r\n\r\n        \/* =========================================\r\n           \ubaa8\ubc14\uc77c \ubc18\uc751\ud615 \ucd5c\uc801\ud654\r\n        ========================================= *\/\r\n        @media (max-width: 992px) {\r\n            .cp-hero { min-height: 60vh; padding-top: 60px; }\r\n            .cp-hero-title { font-size: clamp(2rem, 7vw, 3rem); white-space: normal; line-height: 1.3; }\r\n            \r\n            .cp-filter { gap: 10px; margin-bottom: 40px; }\r\n            .cp-filter-btn { padding: 8px 20px; font-size: 0.95rem; }\r\n            \r\n            .cp-grid { grid-template-columns: 1fr; gap: 30px; } \r\n            \r\n            .cp-modal { top: 60px; height: calc(100vh - 60px); }\r\n            \r\n            .cp-detail-img { height: 300px; }\r\n            .cp-detail-body { padding: 30px 20px; }\r\n            .cp-detail-title { font-size: 2rem; margin-bottom: 20px; }\r\n            .cp-detail-desc { font-size: 1.1rem; margin-bottom: 30px; }\r\n            .cp-detail-specs { grid-template-columns: 1fr; gap: 20px; padding: 25px; }\r\n            \r\n            .cp-modal-close { top: 15px; right: 15px; width: 40px; height: 40px; font-size: 1.2rem; }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"cp-wrap\">\r\n        \r\n        <!-- \ubc30\uacbd \ub3c4\ud615 -->\r\n        <div class=\"cp-bg-shapes\">\r\n            <div class=\"cp-shape cp-shape-1\"><\/div>\r\n            <div class=\"cp-shape cp-shape-2\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- 1. Hero Section -->\r\n        <section class=\"cp-hero\">\r\n            <div class=\"cp-hero-bg\" id=\"cp-parallax-bg\"><\/div>\r\n            <div class=\"cp-hero-overlay\"><\/div>\r\n            <div class=\"cp-container cp-hero-content\">\r\n                <div class=\"cp-hero-subtitle gs-bounce3\">PRODUCTS & WORK<\/div>\r\n                <h1 class=\"cp-hero-title gs-fade-up3\">\uc6b0\ub9ac\uc758 \ud601\uc2e0\uc801\uc778 \uc194\ub8e8\uc158<br><span>PORTFOLIO<\/span><\/h1>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 2. Product Board Section -->\r\n        <section class=\"cp-board\">\r\n            <div class=\"cp-container\">\r\n                \r\n                <!-- \uce74\ud14c\uace0\ub9ac \ud544\ud130 -->\r\n                <div class=\"cp-filter gs-fade-up3\">\r\n                    <button class=\"cp-filter-btn active\" data-filter=\"all\">ALL<\/button>\r\n                    <button class=\"cp-filter-btn\" data-filter=\"web\">WEB UX\/UI<\/button>\r\n                    <button class=\"cp-filter-btn\" data-filter=\"app\">MOBILE APP<\/button>\r\n                    <button class=\"cp-filter-btn\" data-filter=\"branding\">BRANDING<\/button>\r\n                <\/div>\r\n\r\n                <!-- \uc81c\ud488 \uadf8\ub9ac\ub4dc -->\r\n                <div class=\"cp-grid\">\r\n                    \r\n                    <!-- Item 1 -->\r\n                    <div class=\"cp-card gs-fade-up3\" data-category=\"web\" \r\n                         data-img=\"https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?q=80&w=1000&auto=format&fit=crop\"\r\n                         data-title=\"\uae00\ub85c\ubc8c \uc774\ucee4\uba38\uc2a4 \uc6f9 \ud50c\ub7ab\ud3fc \uad6c\ucd95\"\r\n                         data-desc=\"\uc0ac\uc6a9\uc790 \uc911\uc2ec\uc758 \uc9c1\uad00\uc801\uc778 UI\uc640 \uc548\uc815\uc801\uc778 \ubc31\uc5d4\ub4dc \uc2dc\uc2a4\ud15c\uc744 \uacb0\ud569\ud558\uc5ec \ub300\uaddc\ubaa8 \ud2b8\ub798\ud53d\uc744 \ucc98\ub9ac\ud560 \uc218 \uc788\ub294 \ubc18\uc751\ud615 \uc6f9 \ud50c\ub7ab\ud3fc\uc744 \uc131\uacf5\uc801\uc73c\ub85c \ub860\uce6d\ud588\uc2b5\ub2c8\ub2e4.\"\r\n                         data-client=\"B.LANDING Partners\" data-date=\"2026. 05\">\r\n                        <div class=\"cp-thumb\">\r\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?q=80&w=600&auto=format&fit=crop\" alt=\"Web Project\">\r\n                            <div class=\"cp-thumb-overlay\"><span>VIEW PROJECT<\/span><\/div>\r\n                        <\/div>\r\n                        <div class=\"cp-info\">\r\n                            <span class=\"cp-info-cat\">WEB UX\/UI<\/span>\r\n                            <h4 class=\"cp-info-title\">\uae00\ub85c\ubc8c \uc774\ucee4\uba38\uc2a4 \uc6f9 \ud50c\ub7ab\ud3fc \uad6c\ucd95<\/h4>\r\n                            <p class=\"cp-info-desc\">\uc0ac\uc6a9\uc790 \uc911\uc2ec\uc758 \uc9c1\uad00\uc801\uc778 UI\uc640 \uc548\uc815\uc801\uc778 \ubc31\uc5d4\ub4dc \uc2dc\uc2a4\ud15c\uc744 \uacb0\ud569\ud55c \ub300\uaddc\ubaa8 \ubc18\uc751\ud615 \ud50c\ub7ab\ud3fc.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Item 2 -->\r\n                    <div class=\"cp-card gs-fade-up3\" data-category=\"app\" \r\n                         data-img=\"https:\/\/images.unsplash.com\/photo-1512941937669-90a1b58e7e9c?q=80&w=1000&auto=format&fit=crop\"\r\n                         data-title=\"\ucc28\uc138\ub300 \ud540\ud14c\ud06c \ubaa8\ubc14\uc77c \uc571 \ub514\uc790\uc778\"\r\n                         data-desc=\"\ubcf5\uc7a1\ud55c \uae08\uc735 \uc815\ubcf4\ub97c \ud55c\ub208\uc5d0 \ud30c\uc545\ud560 \uc218 \uc788\ub3c4\ub85d \ub370\uc774\ud130\ub97c \uc2dc\uac01\ud654\ud558\uace0, \uc0ac\uc6a9\uc790 \ub3d9\uc120\uc744 \ucd5c\uc18c\ud654\ud558\uc5ec \uc774\ud0c8\ub960\uc744 \ub0ae\ucd98 \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub514\uc790\uc778\uc785\ub2c8\ub2e4.\"\r\n                         data-client=\"Fintech Start-up\" data-date=\"2026. 03\">\r\n                        <div class=\"cp-thumb\">\r\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1512941937669-90a1b58e7e9c?q=80&w=600&auto=format&fit=crop\" alt=\"App Project\">\r\n                            <div class=\"cp-thumb-overlay\"><span>VIEW PROJECT<\/span><\/div>\r\n                        <\/div>\r\n                        <div class=\"cp-info\">\r\n                            <span class=\"cp-info-cat\">MOBILE APP<\/span>\r\n                            <h4 class=\"cp-info-title\">\ucc28\uc138\ub300 \ud540\ud14c\ud06c \ubaa8\ubc14\uc77c \uc571 \ub514\uc790\uc778<\/h4>\r\n                            <p class=\"cp-info-desc\">\ubcf5\uc7a1\ud55c \uae08\uc735 \uc815\ubcf4\ub97c \ud55c\ub208\uc5d0 \ud30c\uc545\ud560 \uc218 \uc788\ub3c4\ub85d \uc2dc\uac01\ud654\ud55c \ubaa8\ubc14\uc77c UX\/UI \uac1c\uc120 \ud504\ub85c\uc81d\ud2b8.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Item 3 -->\r\n                    <div class=\"cp-card gs-fade-up3\" data-category=\"branding\" \r\n                         data-img=\"https:\/\/images.unsplash.com\/photo-1600880292203-757bb62b4baf?q=80&w=1000&auto=format&fit=crop\"\r\n                         data-title=\"\ud504\ub9ac\ubbf8\uc5c4 \ucf54\uc2a4\uba54\ud2f1 \ube0c\ub79c\ub4dc \uc544\uc774\ub374\ud2f0\ud2f0\"\r\n                         data-desc=\"\uc790\uc5f0 \uce5c\ud654\uc801\uc774\uace0 \uace0\uae09\uc2a4\ub7ec\uc6b4 \ube0c\ub79c\ub4dc \ucca0\ud559\uc744 \ub2f4\uc544 \ub85c\uace0, \ud328\ud0a4\uc9c0 \ub514\uc790\uc778, \uc6f9\uc0ac\uc774\ud2b8 \ube44\uc8fc\uc5bc \uac00\uc774\ub4dc\ub97c \ud1b5\ud569\uc801\uc73c\ub85c \uae30\ud68d\ud55c \ube0c\ub79c\ub529 \uc0ac\ub840\uc785\ub2c8\ub2e4.\"\r\n                         data-client=\"Cosmetic Corp\" data-date=\"2025. 11\">\r\n                        <div class=\"cp-thumb\">\r\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600880292203-757bb62b4baf?q=80&w=600&auto=format&fit=crop\" alt=\"Branding Project\">\r\n                            <div class=\"cp-thumb-overlay\"><span>VIEW PROJECT<\/span><\/div>\r\n                        <\/div>\r\n                        <div class=\"cp-info\">\r\n                            <span class=\"cp-info-cat\">BRANDING<\/span>\r\n                            <h4 class=\"cp-info-title\">\ud504\ub9ac\ubbf8\uc5c4 \ucf54\uc2a4\uba54\ud2f1 \ube0c\ub79c\ub4dc \uc544\uc774\ub374\ud2f0\ud2f0<\/h4>\r\n                            <p class=\"cp-info-desc\">\uc790\uc5f0 \uce5c\ud654\uc801 \ucca0\ud559\uc744 \ub2f4\uc740 \ub85c\uace0 \ubc0f \ud328\ud0a4\uc9c0, \ube0c\ub79c\ub4dc \uac00\uc774\ub4dc\ub77c\uc778 \ud1b5\ud569 \uad6c\ucd95 \ud504\ub85c\uc81d\ud2b8.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Item 4 -->\r\n                    <div class=\"cp-card gs-fade-up3\" data-category=\"web\" \r\n                         data-img=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?q=80&w=1000&auto=format&fit=crop\"\r\n                         data-title=\"\ube45\ub370\uc774\ud130 \ubd84\uc11d \uc194\ub8e8\uc158 \ub300\uc2dc\ubcf4\ub4dc\"\r\n                         data-desc=\"\uae30\uc5c5\uc758 \ubc29\ub300\ud55c \ub370\uc774\ud130\ub97c \ud6a8\uacfc\uc801\uc73c\ub85c \ubaa8\ub2c8\ud130\ub9c1\ud560 \uc218 \uc788\ub294 \uc778\ud130\ub799\ud2f0\ube0c \ub300\uc2dc\ubcf4\ub4dc\ub97c React\uc640 D3.js\ub97c \ud65c\uc6a9\ud574 \uad6c\ucd95\ud588\uc2b5\ub2c8\ub2e4.\"\r\n                         data-client=\"Data Analytics Inc\" data-date=\"2025. 08\">\r\n                        <div class=\"cp-thumb\">\r\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?q=80&w=600&auto=format&fit=crop\" alt=\"Web Project\">\r\n                            <div class=\"cp-thumb-overlay\"><span>VIEW PROJECT<\/span><\/div>\r\n                        <\/div>\r\n                        <div class=\"cp-info\">\r\n                            <span class=\"cp-info-cat\">WEB UX\/UI<\/span>\r\n                            <h4 class=\"cp-info-title\">\ube45\ub370\uc774\ud130 \ubd84\uc11d \uc194\ub8e8\uc158 \ub300\uc2dc\ubcf4\ub4dc<\/h4>\r\n                            <p class=\"cp-info-desc\">\uae30\uc5c5\uc758 \ub370\uc774\ud130\ub97c \ud55c\ub208\uc5d0 \ud30c\uc545\ud558\uace0 \uc81c\uc5b4\ud560 \uc218 \uc788\ub294 \uc778\ud130\ub799\ud2f0\ube0c \uad00\ub9ac\uc790 \ub300\uc2dc\ubcf4\ub4dc \uc2dc\uc2a4\ud15c.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Item 5 -->\r\n                    <div class=\"cp-card gs-fade-up3\" data-category=\"app\" \r\n                         data-img=\"https:\/\/images.unsplash.com\/photo-1555774698-0b77e0d5fac6?q=80&w=1000&auto=format&fit=crop\"\r\n                         data-title=\"\ud5ec\uc2a4\ucf00\uc5b4 \uc608\uc57d \ubc0f \uad00\ub9ac \uc560\ud50c\ub9ac\ucf00\uc774\uc158\"\r\n                         data-desc=\"\ubcd1\uc6d0 \uc608\uc57d, \uc9c4\ub8cc \uae30\ub85d \ud655\uc778, \uc6d0\uaca9 \uc0c1\ub2f4 \uae30\ub2a5\uae4c\uc9c0 \ud1b5\ud569 \uc81c\uacf5\ud558\uc5ec \uc758\ub8cc \uc811\uadfc\uc131\uc744 \ud68d\uae30\uc801\uc73c\ub85c \ub192\uc778 \ud5ec\uc2a4\ucf00\uc5b4 \ubaa8\ubc14\uc77c \uc571\uc785\ub2c8\ub2e4.\"\r\n                         data-client=\"Health Plus\" data-date=\"2025. 05\">\r\n                        <div class=\"cp-thumb\">\r\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1555774698-0b77e0d5fac6?q=80&w=600&auto=format&fit=crop\" alt=\"App Project\">\r\n                            <div class=\"cp-thumb-overlay\"><span>VIEW PROJECT<\/span><\/div>\r\n                        <\/div>\r\n                        <div class=\"cp-info\">\r\n                            <span class=\"cp-info-cat\">MOBILE APP<\/span>\r\n                            <h4 class=\"cp-info-title\">\ud5ec\uc2a4\ucf00\uc5b4 \uc608\uc57d \ubc0f \uad00\ub9ac \uc560\ud50c\ub9ac\ucf00\uc774\uc158<\/h4>\r\n                            <p class=\"cp-info-desc\">\ubcd1\uc6d0 \uc9c4\ub8cc\ubd80\ud130 \uc6d0\uaca9 \uc0c1\ub2f4\uae4c\uc9c0 \uc2a4\ub9c8\ud2b8\ud3f0 \ud558\ub098\ub85c \uad00\ub9ac \uac00\ub2a5\ud55c \ud5ec\uc2a4\ucf00\uc5b4 \uc194\ub8e8\uc158.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Item 6 -->\r\n                    <div class=\"cp-card gs-fade-up3\" data-category=\"branding\" \r\n                         data-img=\"https:\/\/images.unsplash.com\/photo-1542744173-8e7e53415bb0?q=80&w=1000&auto=format&fit=crop\"\r\n                         data-title=\"\uae00\ub85c\ubc8c F&B \ud504\ub79c\ucc28\uc774\uc988 \ub9ac\ube0c\ub79c\ub529\"\r\n                         data-desc=\"\uc624\ub798\ub41c \ud504\ub79c\ucc28\uc774\uc988 \ube0c\ub79c\ub4dc\ub97c \ud2b8\ub80c\ub514\ud558\uace0 \uc80a\uc740 \uac10\uac01\uc73c\ub85c \ub9ac\ud3ec\uc9c0\uc154\ub2dd\ud558\uc5ec, \uc0c8\ub85c\uc6b4 \uc138\ub300\uc758 \ud0c0\uac9f \uace0\uac1d\uc744 \uc131\uacf5\uc801\uc73c\ub85c \uc720\uce58\ud55c \ud504\ub85c\uc81d\ud2b8\uc785\ub2c8\ub2e4.\"\r\n                         data-client=\"Food & Beverage Global\" data-date=\"2025. 01\">\r\n                        <div class=\"cp-thumb\">\r\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1542744173-8e7e53415bb0?q=80&w=600&auto=format&fit=crop\" alt=\"Branding Project\">\r\n                            <div class=\"cp-thumb-overlay\"><span>VIEW PROJECT<\/span><\/div>\r\n                        <\/div>\r\n                        <div class=\"cp-info\">\r\n                            <span class=\"cp-info-cat\">BRANDING<\/span>\r\n                            <h4 class=\"cp-info-title\">\uae00\ub85c\ubc8c F&B \ud504\ub79c\ucc28\uc774\uc988 \ub9ac\ube0c\ub79c\ub529<\/h4>\r\n                            <p class=\"cp-info-desc\">\uc62c\ub4dc\ud55c \uc774\ubbf8\uc9c0\ub97c \ud0c8\ud53c\ud558\uace0 \ud2b8\ub80c\ub514\ud55c \uac10\uac01\uc73c\ub85c \uc2dc\uc7a5 \uc810\uc720\uc728\uc744 \ud68c\ubcf5\ud55c \ube0c\ub79c\ub4dc \ub9ac\ub274\uc5bc.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- 3. Full-Screen Detail Modal (cp-wrap \ub0b4\ubd80\uc5d0 \ubc30\uce58\ud558\uc5ec \ubcc0\uc218 \uc801\uc6a9 \ubcf4\uc7a5) -->\r\n        <div class=\"cp-modal\" id=\"productModal\">\r\n            <div class=\"cp-modal-content\">\r\n                <button class=\"cp-modal-close\" id=\"modalClose\">&times;<\/button>\r\n                <img decoding=\"async\" src=\"\" alt=\"Project Cover\" class=\"cp-detail-img\" id=\"modalImg\">\r\n                \r\n                <div class=\"cp-detail-body\">\r\n                    <span class=\"cp-detail-cat\" id=\"modalCat\">CATEGORY<\/span>\r\n                    <h2 class=\"cp-detail-title\" id=\"modalTitle\">Project Title<\/h2>\r\n                    <p class=\"cp-detail-desc\" id=\"modalDesc\">Detailed description goes here.<\/p>\r\n                    \r\n                    <div class=\"cp-detail-specs\">\r\n                        <div class=\"cp-spec-item\">\r\n                            <h5>Client<\/h5>\r\n                            <p id=\"modalClient\">Client Name<\/p>\r\n                        <\/div>\r\n                        <div class=\"cp-spec-item\">\r\n                            <h5>Date<\/h5>\r\n                            <p id=\"modalDate\">YYYY. MM<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            gsap.registerPlugin(ScrollTrigger);\r\n\r\n            \/\/ 1. \ubc30\ub108 \ud328\ub7f4\ub799\uc2a4\r\n            gsap.to(\"#cp-parallax-bg\", {\r\n                yPercent: 30, ease: \"none\",\r\n                scrollTrigger: { trigger: \".cp-hero\", start: \"top top\", end: \"bottom top\", scrub: true }\r\n            });\r\n\r\n            \/\/ 2. \ud14d\uc2a4\ud2b8 \ubc14\uc6b4\uc2a4 \ubc0f \ub4f1\uc7a5 \ud6a8\uacfc\r\n            gsap.fromTo(\".gs-bounce3\", \r\n                { y: -30, opacity: 0 }, { y: 0, opacity: 1, duration: 1, ease: \"bounce.out\" }\r\n            );\r\n            gsap.fromTo(\".gs-fade-up3\", \r\n                { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 1.2, delay: 0.1, stagger: 0.15, ease: \"power4.out\" }\r\n            );\r\n\r\n            \/\/ 3. \uce74\ud14c\uace0\ub9ac \ud544\ud130\ub9c1 \uae30\ub2a5\r\n            const filterBtns = document.querySelectorAll('.cp-filter-btn');\r\n            const cards = document.querySelectorAll('.cp-card');\r\n\r\n            filterBtns.forEach(btn => {\r\n                btn.addEventListener('click', function() {\r\n                    filterBtns.forEach(b => b.classList.remove('active'));\r\n                    this.classList.add('active');\r\n\r\n                    const filterValue = this.getAttribute('data-filter');\r\n\r\n                    cards.forEach(card => {\r\n                        if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {\r\n                            card.style.display = 'block';\r\n                            gsap.fromTo(card, { scale: 0.8, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.4, ease: \"back.out(1.2)\" });\r\n                        } else {\r\n                            card.style.display = 'none';\r\n                        }\r\n                    });\r\n                });\r\n            });\r\n\r\n            \/\/ 4. \ubaa8\ub2ec \uc0c1\uc138\ud398\uc774\uc9c0 \uc81c\uc5b4 \uae30\ub2a5\r\n            const modal = document.getElementById('productModal');\r\n            const modalCloseBtn = document.getElementById('modalClose');\r\n            \r\n            const mImg = document.getElementById('modalImg');\r\n            const mCat = document.getElementById('modalCat');\r\n            const mTitle = document.getElementById('modalTitle');\r\n            const mDesc = document.getElementById('modalDesc');\r\n            const mClient = document.getElementById('modalClient');\r\n            const mDate = document.getElementById('modalDate');\r\n\r\n            cards.forEach(card => {\r\n                card.addEventListener('click', function() {\r\n                    mImg.src = this.getAttribute('data-img');\r\n                    mCat.innerText = this.querySelector('.cp-info-cat').innerText;\r\n                    mTitle.innerText = this.getAttribute('data-title');\r\n                    mDesc.innerText = this.getAttribute('data-desc');\r\n                    mClient.innerText = this.getAttribute('data-client');\r\n                    mDate.innerText = this.getAttribute('data-date');\r\n\r\n                    modal.classList.add('active');\r\n                    document.body.style.overflow = 'hidden';\r\n                });\r\n            });\r\n\r\n            modalCloseBtn.addEventListener('click', function() {\r\n                modal.classList.remove('active');\r\n                document.body.style.overflow = ''; \r\n            });\r\n            \r\n            modal.addEventListener('click', function(e) {\r\n                if(e.target === modal) {\r\n                    modal.classList.remove('active');\r\n                    document.body.style.overflow = '';\r\n                }\r\n            });\r\n        });\r\n    <\/script>\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-43","page","type-page","status-publish"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":2,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/43\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/pages\/43\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/darkviolet-marten-825083.hostingersite.com\/wp-json\/wp\/v2\/media?parent=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}