ILLUSION – Media Space Branding<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\n\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['Noto Sans KR', 'sans-serif'],\n },\n animation: {\n 'fade-in-up': 'fadeInUp 0.8s ease-out forwards',\n },\n keyframes: {\n fadeInUp: {\n '0%': { opacity: '0', transform: 'translateY(20px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n }\n }\n }\n }\n }\n <\/script>\n <style>\n \/* --- \uc6cc\ub4dc\ud504\ub808\uc2a4 \ud14c\ub9c8 \uac04\uc12d \ubc29\uc9c0 \uc2a4\ud0c0\uc77c --- *\/\n header, nav, .nav-menu, .menu-item, .page_item, .menu-item a, .page_item a {\n border: none !important;\n box-shadow: none !important;\n background-image: none !important; \n }\n table, tr, td, th, ul, li {\n border: none !important;\n }\n \n \/* [\uc911\uc694] \ud398\uc774\uc9c0 \uaddc\uaca9\uc5d0 \ub9de\ucda4 (\uac00\ub85c \uc2a4\ud06c\ub864 \ubc29\uc9c0) *\/\n #root {\n width: 100%; \n max-width: 100%; \n margin: 0 auto; \n position: relative;\n overflow-x: hidden; \n }\n \n \/* \ubc30\uacbd\uc0c9 \ubc0f \uae30\ubcf8 \uc124\uc815 *\/\n body { margin: 0; padding: 0; background-color: black; color: white; overflow-x: hidden; }\n \n .custom-scrollbar::-webkit-scrollbar { width: 6px; }\n .custom-scrollbar::-webkit-scrollbar-track { background: #18181b; }\n .custom-scrollbar::-webkit-scrollbar-thumb { background: #581c87; border-radius: 3px; }\n \n #root div, #root span, #root p { border: inherit; } \n <\/style>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ ==========================================\n \/\/ [\uc124\uc815] Contact Form 7 \uc22b\uc790 ID \uc785\ub825\n \/\/ ==========================================\n const CF7_FORM_ID = 2145; \/\/ \uc785\ub825\ud558\uc2e0 ID \uc720\uc9c0\n \/\/ ==========================================\n\n\n \/\/ --- ICON COMPONENTS ---\n const Icon = ({ children, className, size = 24, ...props }) => (\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className} {...props}>\n {children}\n <\/svg>\n );\n\n const Box = (props) => <Icon {...props}><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"\/><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"\/><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"\/><\/Icon>;\n const Layers = (props) => <Icon {...props}><polygon points=\"12 2 2 7 12 12 22 7 12 2\"\/><polyline points=\"2 17 12 22 22 17\"\/><polyline points=\"2 12 12 17 22 12\"\/><\/Icon>;\n const Lightbulb = (props) => <Icon {...props}><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-1 1.5-2.4 1.5-3.8 0-3.2-2.8-5.7-6-5.7s-6 2.5-6 5.7c0 1.4.5 2.8 1.5 3.8.8.8 1.3 1.5 1.5 2.5\"\/><path d=\"M9 18h6\"\/><path d=\"M10 22h4\"\/><\/Icon>;\n const MonitorPlay = (props) => <Icon {...props}><path d=\"m10 7 5 3-5 3Z\"\/><rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"\/><path d=\"M12 17v4\"\/><path d=\"M8 21h8\"\/><\/Icon>;\n const Users = (props) => <Icon {...props}><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/Icon>;\n const ArrowRight = (props) => <Icon {...props}><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/Icon>;\n const Maximize = (props) => <Icon {...props}><path d=\"M8 3H5a2 2 0 0 0-2 2v3\"\/><path d=\"M21 8V5a2 2 0 0 0-2-2h-3\"\/><path d=\"M3 16v3a2 2 0 0 0 2 2h3\"\/><path d=\"M16 21h3a2 2 0 0 0 2-2v-3\"\/><\/Icon>;\n const Zap = (props) => <Icon {...props}><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/Icon>;\n const Menu = (props) => <Icon {...props}><line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\"\/><line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\"\/><line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\"\/><\/Icon>;\n const X = (props) => <Icon {...props}><path d=\"M18 6 6 18\"\/><path d=\"m6 6 18 18\"\/><\/Icon>;\n const ChevronDown = (props) => <Icon {...props}><path d=\"m6 9 6 6 6-6\"\/><\/Icon>;\n const Play = (props) => <Icon {...props}><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/Icon>;\n const Smartphone = (props) => <Icon {...props}><rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\"\/><path d=\"M12 18h.01\"\/><\/Icon>;\n const ScanFace = (props) => <Icon {...props}><path d=\"M3 7V5a2 2 0 0 1 2-2h2\"\/><path d=\"M17 3h2a2 2 0 0 1 2 2v2\"\/><path d=\"M21 17v2a2 2 0 0 1-2 2h-2\"\/><path d=\"M7 21H5a2 2 0 0 1-2-2v-2\"\/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"\/><path d=\"M9 9h.01\"\/><path d=\"M15 9h.01\"\/><\/Icon>;\n const Clock = (props) => <Icon {...props}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/Icon>;\n const Waves = (props) => <Icon {...props}><path d=\"M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1\"\/><path d=\"M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1\"\/><path d=\"M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1\"\/><\/Icon>;\n const Wine = (props) => <Icon {...props}><path d=\"M8 22h8\"\/><path d=\"M7 10h10\"\/><path d=\"M12 15v7\"\/><path d=\"M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z\"\/><\/Icon>;\n const Wind = (props) => <Icon {...props}><path d=\"M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2\"\/><path d=\"M9.6 4.6A2 2 0 1 1 11 8H2\"\/><path d=\"M12.6 19.4A2 2 0 1 0 14 16H2\"\/><\/Icon>;\n const Gamepad2 = (props) => <Icon {...props}><line x1=\"6\" x2=\"10\" y1=\"11\" y2=\"11\"\/><line x1=\"8\" x2=\"8\" y1=\"9\" y2=\"13\"\/><line x1=\"15\" x2=\"15.01\" y1=\"12\" y2=\"12\"\/><line x1=\"18\" x2=\"18.01\" y1=\"10\" y2=\"10\"\/><path d=\"M17.3 19.79a3.5 3.5 0 0 0 4.2-3.87 3.5 3.5 0 0 0-4.63-4.63l-2.43.91a3.5 3.5 0 0 1-2.88 0l-2.43-.91A3.5 3.5 0 0 0 4.5 15.92a3.5 3.5 0 0 0 4.2 3.87L12 19Z\"\/><\/Icon>;\n const Cpu = (props) => <Icon {...props}><rect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\"\/><rect width=\"6\" height=\"6\" x=\"9\" y=\"9\" rx=\"1\"\/><path d=\"M15 2v2\"\/><path d=\"M15 20v2\"\/><path d=\"M2 15h2\"\/><path d=\"M2 9h2\"\/><path d=\"M20 15h2\"\/><path d=\"M20 9h2\"\/><path d=\"M9 2v2\"\/><path d=\"M9 20v2\"\/><\/Icon>;\n const Video = (props) => <Icon {...props}><path d=\"m22 8-6 4 6 4V8Z\"\/><rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\"\/><\/Icon>;\n const Palette = (props) => <Icon {...props}><circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"\/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"\/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"\/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"\/><path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\"\/><\/Icon>;\n const Code = (props) => <Icon {...props}><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/Icon>;\n const Hammer = (props) => <Icon {...props}><path d=\"m15 12-8.5 8.5c-.83.83-2.17.83-3 0 0 0 0 0 0 0a2.12 2.12 0 0 1 0-3L12 9\"\/><path d=\"M17.64 15 22 10.64\"\/><path d=\"m20.91 11.7-1.25-1.25c-.6-.6-.93-1.4-.93-2.25V7.86c0-.55-.45-1-1-1H14.14c-.83 0-1.64-.32-2.25-.94l-1.03-1.03a1.67 1.67 0 0 0-2.32 0l-.6.6c-.63.63-.63 1.71 0 2.36l6.18 6.17c.63.63 1.71.63 2.36 0l.6-.6a1.67 1.67 0 0 0 0-2.32Z\"\/><\/Icon>;\n const Wrench = (props) => <Icon {...props}><path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"\/><\/Icon>;\n const Server = (props) => <Icon {...props}><rect width=\"20\" height=\"8\" x=\"2\" y=\"2\" rx=\"2\" ry=\"2\"\/><rect width=\"20\" height=\"8\" x=\"2\" y=\"14\" rx=\"2\" ry=\"2\"\/><line x1=\"6\" x2=\"6.01\" y1=\"6\" y2=\"6\"\/><line x1=\"6\" x2=\"6.01\" y1=\"18\" y2=\"18\"\/><\/Icon>;\n const Grid = (props) => <Icon {...props}><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"\/><line x1=\"3\" x2=\"21\" y1=\"9\" y2=\"9\"\/><line x1=\"3\" x2=\"21\" y1=\"15\" y2=\"15\"\/><line x1=\"9\" x2=\"9\" y1=\"3\" y2=\"21\"\/><line x1=\"15\" x2=\"15\" y1=\"3\" y2=\"21\"\/><\/Icon>;\n const ShieldCheck = (props) => <Icon {...props}><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/Icon>;\n const Cable = (props) => <Icon {...props}><path d=\"M17 21v-2a1 1 0 0 1-1-1v-1a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1\"\/><path d=\"M19 15V6.5a1 1 0 0 0-7 0v11a1 1 0 0 1-7 0V9\"\/><path d=\"M21 21v-2h-4\"\/><path d=\"M3 5h4V3\"\/><path d=\"M7 5a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a1 1 0 0 1 1-1V3\"\/><\/Icon>;\n const Tent = (props) => <Icon {...props}><path d=\"M3.5 21 14 3\"\/><path d=\"M20.5 21 10 3\"\/><path d=\"M15.5 21 12 15l-3.5 6\"\/><path d=\"M2 21h20\"\/><\/Icon>;\n const Loader = (props) => <Icon {...props}><path d=\"M21 12a9 9 0 1 1-6.219-8.56\"\/><\/Icon>;\n\n const MEDIA_ASSETS = {\n heroBackgroundVideo: \"https:\/\/assets.mixkit.co\/videos\/preview\/mixkit-abstract-purple-lights-background-3047-large.mp4\", \n conceptImage: \"https:\/\/images.unsplash.com\/photo-1492684223066-81342ee5ff30?q=80&w=2070&auto=format&fit=crop\",\n caseStudy_alcohol_1: \"https:\/\/images.unsplash.com\/photo-1514362545857-3bc16c4c7d1b?q=80&w=1000&auto=format&fit=crop\", \n caseStudy_alcohol_2: \"https:\/\/illusion.place\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_9ppa2t9ppa2t9ppa-scaled.png\", \n caseStudy_eyewear_1: \"https:\/\/illusion.place\/wp-content\/uploads\/2025\/11\/unnamed.jpg\", \n caseStudy_eyewear_2: \"https:\/\/illusion.place\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_mfakhjmfakhjmfak-scaled.png\", \n caseStudy_resort_1: \"https:\/\/images.unsplash.com\/photo-1571003123894-1f0594d2b5d9?q=80&w=1000&auto=format&fit=crop\", \n caseStudy_resort_2: \"https:\/\/illusion.place\/wp-content\/uploads\/2025\/11\/unnamed-1.jpg\", \n caseStudy_resort_3: \"https:\/\/illusion.place\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_52dc9d52dc9d52dc.png\", \n construction_popup: \"https:\/\/images.unsplash.com\/photo-1563293887-251f04471905?q=80&w=1000&auto=format&fit=crop\",\n construction_signature: \"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=1000&auto=format&fit=crop\",\n construction_mediaRoom: \"https:\/\/images.unsplash.com\/photo-1596701886708-8f8319f35759?q=80&w=1000&auto=format&fit=crop\", \n };\n\n const App = () => {\n const [isScrolled, setIsScrolled] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [activeModal, setActiveModal] = useState(null); \n \n const [formData, setFormData] = useState({ company: '', contact: '', message: '' });\n const [submitStatus, setSubmitStatus] = useState('idle'); \/\/ idle, submitting, success, error\n\n useEffect(() => {\n const handleScroll = () => setIsScrolled(window.scrollY > 50);\n window.addEventListener('scroll', handleScroll);\n return () => window.removeEventListener('scroll', handleScroll);\n }, []);\n\n const scrollToSection = (id) => {\n const element = document.getElementById(id);\n if (element) element.scrollIntoView({ behavior: 'smooth' });\n setMobileMenuOpen(false);\n };\n\n const closeModal = () => setActiveModal(null);\n\n const handleInputChange = (e) => {\n const { name, value } = e.target;\n setFormData({ ...formData, [name]: value });\n };\n\n \/\/ Contact Form 7 AJAX Submission\n const handleCF7Submit = async (e) => {\n e.preventDefault();\n setSubmitStatus('submitting');\n\n \/\/ 1. Form Data \uad6c\uc131 (CF7 \ud544\ub4dc\uba85\uacfc \ub9e4\uce6d)\n \/\/ [\uc8fc\uc758] CF7 \ud3fc\uc5d0 \uc124\uc815\ud55c \ud544\ub4dc\uba85(name)\uacfc \uc815\ud655\ud788 \uc77c\uce58\ud574\uc57c \ud569\ub2c8\ub2e4.\n const body = new FormData();\n body.append('cf-company', formData.company);\n body.append('cf-contact', formData.contact);\n body.append('cf-message', formData.message);\n body.append('_wpcf7_unit_tag', 'rte'); \n\n \/\/ 2. \uc6cc\ub4dc\ud504\ub808\uc2a4 REST API \uacbd\ub85c (\uace0\uc720\uc8fc\uc18c \uc124\uc815\uc5d0 \ub530\ub978 \ubd84\uae30)\n \/\/ \ud604\uc7ac \uc0ac\uc774\ud2b8 \uc8fc\uc18c\uac00 ?page_id= \ud615\uc2dd\uc774\ubbc0\ub85c, \uae30\ubcf8(Plain) \uace0\uc720\uc8fc\uc18c\uc6a9 API \uacbd\ub85c\ub97c \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.\n \/\/ \uc774 \uc8fc\uc18c\ub294 \uace0\uc720\uc8fc\uc18c \uc124\uc815\uacfc \uc0c1\uad00\uc5c6\uc774 \uc791\ub3d9\ud558\ub294 \uc548\uc804\ud55c \ubc29\uc2dd\uc785\ub2c8\ub2e4.\n const apiUrl = `${window.location.origin}\/?rest_route=\/contact-form-7\/v1\/contact-forms\/${CF7_FORM_ID}\/feedback`;\n\n try {\n const response = await fetch(apiUrl, {\n method: 'POST',\n body: body\n });\n \n \/\/ \uc751\ub2f5\uc774 HTML\uc774\uac70\ub098 404\uc778 \uacbd\uc6b0 \uccb4\ud06c\n if (!response.ok) {\n throw new Error(`HTTP Error: ${response.status}`);\n }\n\n const result = await response.json();\n\n if (result.status === 'mail_sent') {\n setSubmitStatus('success');\n setFormData({ company: '', contact: '', message: '' });\n alert('\ubb38\uc758\uac00 \uc131\uacf5\uc801\uc73c\ub85c \uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ub2f4\ub2f9\uc790\uac00 \uace7 \uc5f0\ub77d\ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4.');\n } else {\n console.error('CF7 Error:', result);\n setSubmitStatus('error');\n \/\/ \uc2e4\ud328 \uc6d0\uc778 \uba54\uc2dc\uc9c0 \ucd9c\ub825 (\uc720\ud6a8\uc131 \uac80\uc0ac \uc2e4\ud328 \ub4f1)\n alert('\uc804\uc1a1 \uc2e4\ud328: ' + result.message);\n }\n } catch (error) {\n console.error('Network Error:', error);\n setSubmitStatus('error');\n alert(`\ub124\ud2b8\uc6cc\ud06c \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.\\n\\n\uc6d0\uc778: ${error.message}\\n\\nTip: Contact Form 7 \ud50c\ub7ec\uadf8\uc778\uc774 \ud65c\uc131\ud654\ub418\uc5b4 \uc788\ub294\uc9c0, ID(${CF7_FORM_ID})\uac00 \uc815\ud655\ud55c\uc9c0 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n } finally {\n setSubmitStatus('idle');\n }\n };\n\n return (\n <div className=\"min-h-screen bg-black text-white font-sans selection:bg-purple-500 selection:text-white overflow-x-hidden\">\n \n <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${isScrolled ? 'bg-black\/90 backdrop-blur-md border-b border-white\/10 py-4' : 'bg-transparent py-6'}`}>\n <div className=\"container mx-auto px-6 flex justify-between items-center\">\n <div className=\"text-2xl font-bold tracking-tighter flex items-center gap-2 cursor-pointer\" onClick={() => window.scrollTo(0,0)}>\n\n <\/div>\n <div className=\"hidden md:flex gap-8 items-center text-sm font-medium text-gray-300\">\n <button onClick={() => scrollToSection('about')} className=\"hover:text-white transition-colors\">\uc11c\ube44\uc2a4 \uc18c\uac1c<\/button>\n <button onClick={() => scrollToSection('process')} className=\"hover:text-white transition-colors\">\uc9c4\ud589 \uacfc\uc815<\/button>\n <button onClick={() => scrollToSection('case-study')} className=\"hover:text-white transition-colors\">\uc131\uacf5 \uc0ac\ub840<\/button>\n <button onClick={() => scrollToSection('contact')} className=\"px-5 py-2 bg-white text-black rounded-full font-bold hover:bg-purple-500 hover:text-white transition-all\">\ubb38\uc758\ud558\uae30<\/button>\n <\/div>\n <button className=\"md:hidden text-white\" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>\n {mobileMenuOpen ? <X \/> : <Menu \/>}\n <\/button>\n <\/div>\n {mobileMenuOpen && (\n <div className=\"md:hidden absolute top-full left-0 w-full bg-black border-b border-white\/10 p-6 flex flex-col gap-4 shadow-2xl\">\n <button onClick={() => scrollToSection('about')} className=\"text-left text-gray-300 py-2\">\uc11c\ube44\uc2a4 \uc18c\uac1c<\/button>\n <button onClick={() => scrollToSection('process')} className=\"text-left text-gray-300 py-2\">\uc9c4\ud589 \uacfc\uc815<\/button>\n <button onClick={() => scrollToSection('case-study')} className=\"text-left text-gray-300 py-2\">\uc131\uacf5 \uc0ac\ub840<\/button>\n <button onClick={() => scrollToSection('contact')} className=\"text-left text-purple-400 font-bold py-2\">\ubb38\uc758\ud558\uae30<\/button>\n <\/div>\n )}\n <\/nav>\n\n <section className=\"relative h-screen flex items-center justify-center overflow-hidden\">\n <div className=\"absolute inset-0 z-0\">\n <video autoPlay loop muted playsInline className=\"w-full h-full object-cover opacity-60\">\n <source src={MEDIA_ASSETS.heroBackgroundVideo} type=\"video\/mp4\" \/>\n <\/video>\n <div className=\"absolute inset-0 bg-gradient-to-b from-black\/70 via-black\/40 to-black\"><\/div>\n <\/div>\n <div className=\"container mx-auto px-6 relative z-10 text-center\">\n <div className=\"inline-block px-4 py-1 mb-6 border border-purple-500\/50 rounded-full bg-purple-900\/30 backdrop-blur-sm text-purple-300 text-sm font-medium animate-fade-in-up\">\n \ubbf8\ub514\uc5b4 \uc544\ud2b8 \u00d7 \uacf5\uac04 \ube0c\ub79c\ub529\n <\/div>\n <h1 className=\"text-5xl md:text-7xl font-bold leading-tight mb-8 drop-shadow-2xl\">\n \uacf5\uac04\uc744 <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500\">\uc0b4\uc544\uc788\ub294 \ubab0\uc785\ud615\uacbd\ud5d8<\/span>\uc73c\ub85c<br \/>\n \ub514\uc790\uc778\ud569\ub2c8\ub2e4, <span className=\"text-white\">ILLUSION<\/span>\n <\/h1>\n <p className=\"text-lg md:text-xl text-gray-200 max-w-2xl mx-auto mb-10 drop-shadow-lg font-light\">\n \ub2e8\uc21c\ud55c \uc778\ud14c\ub9ac\uc5b4\ub098 \ud31d\uc5c5\uc2a4\ud1a0\uc5b4\ub97c \ub118\uc5b4\uc12d\ub2c8\ub2e4.<br \/>\n \ubc14\ub2e5, \ubcbd, \ucc9c\uc7a5\uc774 \ube0c\ub79c\ub4dc\uc758 \uc2a4\ud1a0\ub9ac\ub85c \ubcc0\ud558\ub294 <b>\ucd08\ubab0\uc785\ud615 \ubbf8\ub514\uc5b4 \uacf5\uac04<\/b>\uc744 \uad6c\ucd95\ud574\ub4dc\ub9bd\ub2c8\ub2e4.\n <\/p>\n <div className=\"flex flex-col md:flex-row justify-center gap-4\">\n <button onClick={() => scrollToSection('about')} className=\"px-8 py-4 bg-purple-600\/90 hover:bg-purple-600 backdrop-blur text-white rounded-lg font-bold transition-all flex items-center justify-center gap-2 border border-purple-400\/30\">\n \uc11c\ube44\uc2a4 \uc790\uc138\ud788 \ubcf4\uae30 <ChevronDown size={20} \/>\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"about\" className=\"py-24 bg-zinc-950\">\n <div className=\"container mx-auto px-6\">\n <div className=\"grid md:grid-cols-2 gap-16 items-center\">\n <div className=\"order-2 md:order-1\">\n <h2 className=\"text-3xl md:text-5xl font-bold mb-8 leading-tight\">\n \uc65c <span className=\"text-purple-500\">\ubbf8\ub514\uc5b4 \uacf5\uac04 \ube0c\ub79c\ub529<\/span>\uc778\uac00\uc694?\n <\/h2>\n <p className=\"text-gray-400 text-lg mb-6 leading-relaxed\">\n \uae30\uc874\uc758 \ud31d\uc5c5\uc2a4\ud1a0\uc5b4\ub098 \uc804\uc2dc \uacf5\uac04\uc740 \uc815\uc801\uc778 \uc778\ud14c\ub9ac\uc5b4\uc640 \ub2e8\uc21c\ud55c \uc81c\ud488 \uc9c4\uc5f4\uc5d0 \uadf8\ucce4\uc2b5\ub2c8\ub2e4. \n \uace0\uac1d\uc740 '\uad6c\uacbd'\ub9cc \ud560 \ubfd0, \ube0c\ub79c\ub4dc\uc5d0 '\ubab0\uc785'\ud558\uc9c0 \ubabb\ud588\uc2b5\ub2c8\ub2e4.\n <\/p>\n <div className=\"space-y-6 mt-8\">\n <div className=\"flex gap-4\">\n <div className=\"w-12 h-12 rounded-lg bg-blue-900\/30 flex items-center justify-center text-blue-400 shrink-0 border border-blue-500\/20\"><Maximize \/><\/div>\n <div><h3 className=\"text-xl font-bold mb-2\">\uacf5\uac04\uc758 \ud655\uc7a5 (XR & Media)<\/h3><p className=\"text-gray-400 text-sm\">\ube54\ud504\ub85c\uc81d\ud130, LED Wall, XR \uae30\uc220\uc744 \ud65c\uc6a9\ud574 \ubcbd, \ubc14\ub2e5, \ucc9c\uc7a5\uae4c\uc9c0 \ubaa8\ub4e0 \uba74\uc744 \uc785\uccb4\uc801\uc778 \ub514\uc2a4\ud50c\ub808\uc774\ub85c \uc804\ud658\ud569\ub2c8\ub2e4.<\/p><\/div>\n <\/div>\n <div className=\"flex gap-4\">\n <div className=\"w-12 h-12 rounded-lg bg-purple-900\/30 flex items-center justify-center text-purple-400 shrink-0 border border-purple-500\/20\"><Zap \/><\/div>\n <div><h3 className=\"text-xl font-bold mb-2\">\uc624\uac10\uc744 \uc790\uadf9\ud558\ub294 \uacbd\ud5d8<\/h3><p className=\"text-gray-400 text-sm\">\ub2e8\uc21c \uc2dc\uac01 \uc815\ubcf4\ub97c \ub118\uc5b4, \uc628\ubab8\uc73c\ub85c \ube0c\ub79c\ub4dc\ub97c \uccb4\ud5d8\ud558\uac8c \ud558\uc5ec \uac15\ub825\ud55c \uae30\uc5b5\uacfc \ud32c\ub364\uc744 \ud615\uc131\ud569\ub2c8\ub2e4.<\/p><\/div>\n <\/div>\n <div className=\"flex gap-4\">\n <div className=\"w-12 h-12 rounded-lg bg-pink-900\/30 flex items-center justify-center text-pink-400 shrink-0 border border-pink-500\/20\"><Layers \/><\/div>\n <div><h3 className=\"text-xl font-bold mb-2\">\uc9c0\uc18d \uac00\ub2a5\ud55c \ub79c\ub4dc\ub9c8\ud06c<\/h3><p className=\"text-gray-400 text-sm\">\ucca0\uac70\ub418\ub294 \uc784\uc2dc \ud31d\uc5c5\uc774 \uc544\ub2d9\ub2c8\ub2e4. \uc9c0\uc18d\uc801\uc778 \uc124\uce58 \uacf5\uac04\uacfc \uc778\ud14c\ub9ac\uc5b4\ub97c \ud3ec\ud568\ud558\uc5ec \uae30\uc5c5\uc758 \uc2dc\uadf8\ub2c8\ucc98 \uacf5\uac04\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div className=\"order-1 md:order-2 relative h-[500px] rounded-2xl overflow-hidden group shadow-2xl border border-white\/10\">\n <img src={MEDIA_ASSETS.conceptImage} alt=\"Media Art Concept\" className=\"absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-70 group-hover:opacity-100\" \/>\n <div className=\"absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent\"><\/div>\n <div className=\"absolute bottom-0 left-0 right-0 p-8\">\n <div className=\"w-16 h-16 bg-white\/10 backdrop-blur-md rounded-full flex items-center justify-center mb-4 cursor-pointer hover:bg-purple-600 transition-colors\"><Play className=\"fill-white translate-x-1\" size={24} \/><\/div>\n <p className=\"text-xs text-purple-400 uppercase tracking-widest mb-2 font-bold\">ILLUSION CONCEPT<\/p>\n <h3 className=\"text-2xl font-bold text-white\">\uace0\uac1d\uc774 \uac78\uc5b4 \ub4e4\uc5b4\uac00\ub294 \ube0c\ub79c\ub4dc \ubb34\ube44<\/h3>\n <p className=\"text-gray-400 text-sm mt-2\">\uacf5\uac04 \uc790\uccb4\uac00 \ud558\ub098\uc758 \uac70\ub300\ud55c \uc2a4\ud06c\ub9b0\uc774 \ub429\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"process\" className=\"py-24 bg-black relative\">\n <div className=\"container mx-auto px-6\">\n <div className=\"text-center mb-16\">\n <h2 className=\"text-3xl md:text-4xl font-bold mb-4\">One-Stop Solution<\/h2>\n <p className=\"text-gray-400\">\ucee8\uc124\ud305\ubd80\ud130 \uc124\uce58, \ucf58\ud150\uce20, \ud64d\ubcf4\uae4c\uc9c0 \ud134\ud0a4(Turn-key)\ub85c \uc9c4\ud589\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div className=\"grid md:grid-cols-4 gap-8\">\n {[\n { icon: <Users className=\"w-8 h-8\" \/>, title: \"1. \ubd84\uc11d \ubc0f \ucee8\uc124\ud305\", desc: \"\uae30\uc5c5\uc758 \ubb38\uc81c\uc810, \ube0c\ub79c\ub4dc \ubc29\ud5a5\uc131, \ud0c0\uac9f \uace0\uac1d, \uc124\uce58 \uc7a5\uc18c\uc758 \ub3d9\uc120\uacfc \ud658\uacbd\uc744 \uc815\ubc00 \ubd84\uc11d\ud569\ub2c8\ub2e4.\", modalId: null },\n { icon: <Lightbulb className=\"w-8 h-8\" \/>, title: \"2. \uacf5\uac04 \uae30\ud68d & \ub514\uc790\uc778\", desc: \"\ubbf8\ub514\uc5b4 \uc544\ud2b8 \uae30\uc220(XR, \ub9f5\ud551 \ub4f1)\uc744 \uc811\ubaa9\ud558\uc5ec \ubc14\ub2e5, \ubcbd, \ucc9c\uc7a5\uc744 \uc544\uc6b0\ub974\ub294 \uc785\uccb4\uc801 \uacf5\uac04\uc744 \uc124\uacc4\ud569\ub2c8\ub2e4.\", modalId: 'design', cta: \"\uc81c\uc791 \ud30c\uc774\ud504\ub77c\uc778 \ud655\uc778\" },\n { icon: <Box className=\"w-8 h-8\" \/>, title: \"3. \uc2dc\uacf5 \ubc0f \uc124\uce58\", desc: \"\uc778\ud14c\ub9ac\uc5b4 \uc2dc\uacf5\ubd80\ud130 \ube54\ud504\ub85c\uc81d\ud130, LED, \uc74c\ud5a5 \uc7a5\ube44 \uc124\uce58\uae4c\uc9c0 \uc644\ubcbd\ud55c \ud558\ub4dc\uc6e8\uc5b4 \ud658\uacbd\uc744 \uad6c\ucd95\ud569\ub2c8\ub2e4.\", modalId: 'construction', cta: \"\uc2dc\uacf5 \ud504\ub85c\uc138\uc2a4 \ud655\uc778\" },\n { icon: <MonitorPlay className=\"w-8 h-8\" \/>, title: \"4. \ucf58\ud150\uce20 & \ud64d\ubcf4\", desc: \"\uacf5\uac04\uc5d0 \ucd5c\uc801\ud654\ub41c \uace0\ud004\ub9ac\ud2f0 \uc601\uc0c1 \ucf58\ud150\uce20 \uc81c\uc791 \ubc0f \uc624\ud508 \uc774\ud6c4 \ub9c8\ucf00\ud305\uae4c\uc9c0 \ucc45\uc784\uc9d1\ub2c8\ub2e4.\", modalId: null }\n ].map((step, index) => (\n <div key={index} onClick={() => { if (step.modalId) setActiveModal(step.modalId); }} className={`bg-zinc-900\/50 p-8 rounded-2xl border border-white\/5 transition-all group ${step.modalId ? 'cursor-pointer hover:border-purple-500 hover:bg-zinc-800\/80 relative overflow-hidden' : 'hover:border-purple-500\/50 hover:-translate-y-2'}`}>\n {step.modalId && (<div className=\"absolute top-0 right-0 p-2\"><span className=\"flex h-3 w-3\"><span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75\"><\/span><span className=\"relative inline-flex rounded-full h-3 w-3 bg-purple-500\"><\/span><\/span><\/div>)}\n <div className={`w-16 h-16 bg-zinc-800 rounded-full flex items-center justify-center text-white mb-6 transition-colors ${step.modalId ? 'group-hover:bg-purple-600' : 'group-hover:bg-purple-600'}`}>{step.icon}<\/div>\n <h3 className=\"text-xl font-bold mb-3 flex items-center gap-2\">{step.title}{step.modalId && <ArrowRight size={16} className=\"text-purple-400 opacity-0 group-hover:opacity-100 transition-opacity\" \/>}<\/h3>\n <p className=\"text-gray-400 text-sm leading-relaxed mb-4\">{step.desc}<\/p>\n {step.modalId && (<div className=\"text-xs font-bold text-purple-400 mt-2 flex items-center gap-1 group-hover:translate-x-1 transition-transform\"><Zap size={12} \/> {step.cta}<\/div>)}\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n\n {activeModal && (\n <div className=\"fixed inset-0 z-[100] flex items-center justify-center p-4\">\n <div className=\"absolute inset-0 bg-black\/80 backdrop-blur-sm\" onClick={closeModal}><\/div>\n <div className=\"relative bg-zinc-900 border border-purple-500\/30 w-full max-w-5xl rounded-2xl overflow-hidden shadow-2xl flex flex-col max-h-[90vh]\">\n {activeModal === 'design' && (\n <>\n <div className=\"p-6 border-b border-white\/10 flex justify-between items-center bg-black\/50\">\n <div><h3 className=\"text-2xl font-bold flex items-center gap-2\"><Layers className=\"text-purple-500\" \/>ILLUSION Design Pipeline<\/h3><p className=\"text-gray-400 text-sm mt-1\">\uace0\uac1d\uc758 \uc0c1\uc0c1\uc744 \ud604\uc2e4\ub85c \ub9cc\ub4dc\ub294 \uc77c\ub8e8\uc83c\ub9cc\uc758 \ub514\uc790\uc778 \uacf5\uc815\uc785\ub2c8\ub2e4.<\/p><\/div>\n <button onClick={closeModal} className=\"p-2 hover:bg-white\/10 rounded-full transition-colors\"><X \/><\/button>\n <\/div>\n <div className=\"p-6 md:p-10 overflow-y-auto custom-scrollbar\">\n <div className=\"mb-12\">\n <div className=\"flex items-center gap-3 mb-6\">\n <div className=\"p-3 bg-blue-900\/30 rounded-lg text-blue-400 border border-blue-500\/30\"><Gamepad2 size={24} \/><\/div>\n <div><h4 className=\"text-xl font-bold text-white\">1. XR \uc778\ud130\ub799\ud2f0\ube0c \uac8c\uc784\/\ucf58\ud150\uce20<\/h4><p className=\"text-sm text-gray-400\">Unity\/Unreal Engine\uc744 \ud65c\uc6a9\ud55c \uc2e4\uc2dc\uac04 \ubc18\uc751\ud615 \uacf5\uac04 \uad6c\ucd95<\/p><\/div>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-5 gap-4 relative\">\n <div className=\"hidden md:block absolute top-1\/2 left-0 w-full h-0.5 bg-zinc-800 -z-10 -translate-y-1\/2\"><\/div>\n {[{ step: \"01\", title: \"\uae30\ud68d & \ub85c\uc9c1\uc124\uacc4\", icon: <Lightbulb size={20}\/>, desc: \"\uacf5\uac04 \uc13c\uc11c\uc640 \uc0ac\uc6a9\uc790 \ubc18\uc751 \uc2dc\ub098\ub9ac\uc624 \uc124\uacc4\" }, { step: \"02\", title: \"3D \uc5d0\uc14b \uc81c\uc791\", icon: <Box size={20}\/>, desc: \"\ucd5c\uc801\ud654\ub41c 3D \ubaa8\ub378\ub9c1 \ubc0f UI \ub514\uc790\uc778\" }, { step: \"03\", title: \"\uc5d4\uc9c4 \ud504\ub85c\uadf8\ub798\ubc0d\", icon: <Code size={20}\/>, desc: \"Unity\/Unreal \ub0b4 \ubb3c\ub9ac\uc5d4\uc9c4 \ubc0f \uc778\ud130\ub799\uc158 \uad6c\ud604\" }, { step: \"04\", title: \"\uc13c\uc11c \uc5f0\ub3d9\", icon: <Cpu size={20}\/>, desc: \"LiDAR\/\uc801\uc678\uc120 \uc13c\uc11c\uc640 \ucf58\ud150\uce20 \ub3d9\uae30\ud654\" }, { step: \"05\", title: \"\ud14c\uc2a4\ud2b8 & \ucd5c\uc801\ud654\", icon: <Zap size={20}\/>, desc: \"\ud604\uc7a5 \ud504\ub808\uc784 \ub4dc\ub78d \ubc29\uc9c0 \ubc0f \ub514\ubc84\uae45\" }].map((item, idx) => (\n <div key={idx} className=\"bg-zinc-800 p-4 rounded-xl border border-white\/5 flex flex-col items-center text-center relative z-10 hover:border-blue-500 transition-colors\">\n <div className=\"w-8 h-8 rounded-full bg-zinc-900 border border-white\/10 flex items-center justify-center text-xs font-bold text-gray-500 mb-3\">{item.step}<\/div>\n <div className=\"text-blue-400 mb-2\">{item.icon}<\/div>\n <h5 className=\"font-bold text-sm mb-1\">{item.title}<\/h5>\n <p className=\"text-[11px] text-gray-400 leading-tight\">{item.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <div>\n <div className=\"flex items-center gap-3 mb-6\">\n <div className=\"p-3 bg-purple-900\/30 rounded-lg text-purple-400 border border-purple-500\/30\"><Video size={24} \/><\/div>\n <div><h4 className=\"text-xl font-bold text-white\">2. \ud558\uc774\uc5d4\ub4dc \uc2e4\uc0ac \ub514\uc790\uc778 (Media Art)<\/h4><p className=\"text-sm text-gray-400\">Cinema 4D\/After Effects\ub97c \ud65c\uc6a9\ud55c \uc555\ub3c4\uc801\uc778 \uc601\uc0c1\ubbf8<\/p><\/div>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-4 gap-4 relative\">\n <div className=\"hidden md:block absolute top-1\/2 left-0 w-full h-0.5 bg-zinc-800 -z-10 -translate-y-1\/2\"><\/div>\n {[{ step: \"01\", title: \"\uc2a4\ud1a0\ub9ac\ubcf4\ub4dc & \uc2a4\ud0c0\uc77c\ud504\ub808\uc784\", icon: <Palette size={20}\/>, desc: \"\uacf5\uac04\uc758 \ud1a4\uc564\ub9e4\ub108\ub97c \uacb0\uc815\ud558\ub294 \uc544\ud2b8 \ub514\ub809\ud305\" }, { step: \"02\", title: \"3D \ubaa8\uc158 & \uc2dc\ubbac\ub808\uc774\uc158\", icon: <Wind size={20}\/>, desc: \"\uc785\uccb4\uac10 \uc788\ub294 \uc6c0\uc9c1\uc784\uacfc \ubb3c\ub9ac \uc2dc\ubbac\ub808\uc774\uc158\" }, { step: \"03\", title: \"\ud14d\uc2a4\ucc98\ub9c1 & \ub77c\uc774\ud305\", icon: <Lightbulb size={20}\/>, desc: \"\uc2e4\uc0ac \uc218\uc900\uc758 \uc9c8\uac10 \ud45c\ud604 \ubc0f \ube5b \uc124\uacc4\" }, { step: \"04\", title: \"\ub80c\ub354\ub9c1 & \ud569\uc131\", icon: <Layers size={20}\/>, desc: \"8K \uc774\uc0c1\uc758 \uace0\ud574\uc0c1\ub3c4 \ucd9c\ub825 \ubc0f \uc0c9\ubcf4\uc815\" }].map((item, idx) => (\n <div key={idx} className=\"bg-zinc-800 p-4 rounded-xl border border-white\/5 flex flex-col items-center text-center relative z-10 hover:border-purple-500 transition-colors\">\n <div className=\"w-8 h-8 rounded-full bg-zinc-900 border border-white\/10 flex items-center justify-center text-xs font-bold text-gray-500 mb-3\">{item.step}<\/div>\n <div className=\"text-purple-400 mb-2\">{item.icon}<\/div>\n <h5 className=\"font-bold text-sm mb-1\">{item.title}<\/h5>\n <p className=\"text-[11px] text-gray-400 leading-tight\">{item.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/div>\n <\/>\n )}\n {activeModal === 'construction' && (\n <>\n <div className=\"p-6 border-b border-white\/10 flex justify-between items-center bg-black\/50\">\n <div><h3 className=\"text-2xl font-bold flex items-center gap-2\"><Hammer className=\"text-purple-500\" \/>ILLUSION Construction & Tech<\/h3><p className=\"text-gray-400 text-sm mt-1\">\uc790\uccb4 \uc2dc\uacf5\ud300\uc774 \ud558\ub4dc\uc6e8\uc5b4\ubd80\ud130 \uc2dc\uc2a4\ud15c\uae4c\uc9c0 \uc6d0\uc2a4\ud1b1\uc73c\ub85c \uad6c\ucd95\ud569\ub2c8\ub2e4.<\/p><\/div>\n <button onClick={closeModal} className=\"p-2 hover:bg-white\/10 rounded-full transition-colors\"><X \/><\/button>\n <\/div>\n <div className=\"p-6 md:p-10 overflow-y-auto custom-scrollbar\">\n <h4 className=\"text-xl font-bold text-white mb-6 flex items-center gap-2\"><Box size={20} className=\"text-purple-400\"\/> \uacf5\uac04 \uc720\ud615\ubcc4 \uc2dc\uacf5 \uc194\ub8e8\uc158<\/h4>\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6 mb-16\">\n <div className=\"bg-zinc-800\/50 rounded-2xl border border-white\/10 overflow-hidden hover:border-purple-500\/50 transition-all group\">\n <div className=\"h-48 overflow-hidden relative\">\n <img src={MEDIA_ASSETS.construction_popup} alt=\"Popup Store Construction\" className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80 group-hover:opacity-100\" \/>\n <div className=\"absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent\"><\/div>\n <div className=\"absolute bottom-4 left-4 flex items-center gap-2 text-purple-400 font-bold text-lg\"><Tent size={24} \/> \uc77c\uc2dc\uc801 \ud31d\uc5c5\uc2a4\ud1a0\uc5b4<\/div>\n <\/div>\n <div className=\"p-6 pt-4\"><div className=\"flex flex-col space-y-2 text-sm text-gray-300\"><div className=\"flex gap-2\"><span className=\"text-purple-500 font-bold\">\u2022<\/span><span><strong>\uae30\uac04:<\/strong> 1\uc8fc ~ 3\uac1c\uc6d4 \ub2e8\uae30 \uc6b4\uc601<\/span><\/div><div className=\"flex gap-2\"><span className=\"text-purple-500 font-bold\">\u2022<\/span><span><strong>\ud2b9\uc9d5:<\/strong> \ubaa8\ub4c8\ud615 \ud2b8\ub7ec\uc2a4 \uad6c\uc870, \ub80c\ud0c8 \uc7a5\ube44 \uc138\ud305<\/span><\/div><div className=\"flex gap-2\"><span className=\"text-purple-500 font-bold\">\u2022<\/span><span>\ucca0\uac70 \ubc0f \uc6d0\uc0c1\ubcf5\uad6c\uac00 \uc6a9\uc774\ud55c \uc124\uacc4<\/span><\/div><\/div><\/div>\n <\/div>\n <div className=\"bg-zinc-800\/50 rounded-2xl border border-white\/10 overflow-hidden hover:border-blue-500\/50 transition-all group\">\n <div className=\"h-48 overflow-hidden relative\">\n <img src={MEDIA_ASSETS.construction_signature} alt=\"Signature Space\" className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80 group-hover:opacity-100\" \/>\n <div className=\"absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent\"><\/div>\n <div className=\"absolute bottom-4 left-4 flex items-center gap-2 text-blue-400 font-bold text-lg\"><Box size={24} \/> \uc2dc\uadf8\ub2c8\ucc98 \uacf5\uac04 (\uc0c1\uc124)<\/div>\n <\/div>\n <div className=\"p-6 pt-4\"><div className=\"flex flex-col space-y-2 text-sm text-gray-300\"><div className=\"flex gap-2\"><span className=\"text-blue-500 font-bold\">\u2022<\/span><span><strong>\ub300\uc0c1:<\/strong> \uae30\uc5c5 \ub85c\ube44, \ud64d\ubcf4\uad00, \ud50c\ub798\uadf8\uc2ed \uc2a4\ud1a0\uc5b4<\/span><\/div><div className=\"flex gap-2\"><span className=\"text-blue-500 font-bold\">\u2022<\/span><span><strong>\ud2b9\uc9d5:<\/strong> \uc778\ud14c\ub9ac\uc5b4 \uc77c\uccb4\ud615 \ub9e4\ub9bd \ub9c8\uac10<\/span><\/div><div className=\"flex gap-2\"><span className=\"text-blue-500 font-bold\">\u2022<\/span><span>\uc7a5\uae30 \uc6b4\uc601\uc744 \uc704\ud55c \ub0b4\uad6c\uc131 & \ucfe8\ub9c1 \uc2dc\uc2a4\ud15c<\/span><\/div><\/div><\/div>\n <\/div>\n <div className=\"bg-zinc-800\/50 rounded-2xl border border-white\/10 overflow-hidden hover:border-pink-500\/50 transition-all group\">\n <div className=\"h-48 overflow-hidden relative\">\n <img src={MEDIA_ASSETS.construction_mediaRoom} alt=\"Immersive Media Room\" className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80 group-hover:opacity-100\" \/>\n <div className=\"absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent\"><\/div>\n <div className=\"absolute bottom-4 left-4 flex items-center gap-2 text-pink-400 font-bold text-lg\"><Maximize size={24} \/> \uc2e4\ub0b4 \ubbf8\ub514\uc5b4\ub8f8<\/div>\n <\/div>\n <div className=\"p-6 pt-4\"><div className=\"flex flex-col space-y-2 text-sm text-gray-300\"><div className=\"flex gap-2\"><span className=\"text-pink-500 font-bold\">\u2022<\/span><span><strong>\uad6c\uc131:<\/strong> 6\uba74(\ubcbd+\ubc14\ub2e5+\ucc9c\uc7a5) \ub9f5\ud551<\/span><\/div><div className=\"flex gap-2\"><span className=\"text-pink-500 font-bold\">\u2022<\/span><span><strong>\ud2b9\uc9d5:<\/strong> \ucd08\uace0\ud654\uc9c8 \ud504\ub85c\uc81d\uc158 & LED Wall<\/span><\/div><div className=\"flex gap-2\"><span className=\"text-pink-500 font-bold\">\u2022<\/span><span>\uc644\ubcbd\ud55c \ubab0\uc785\uc744 \uc704\ud55c \uc554\ub9c9\/\ubc29\uc74c \uc2dc\uacf5<\/span><\/div><\/div><\/div>\n <\/div>\n <\/div>\n <div className=\"mb-6\">\n <div className=\"flex items-center gap-3 mb-6\">\n <div className=\"p-3 bg-teal-900\/30 rounded-lg text-teal-400 border border-teal-500\/30\"><Wrench size={24} \/><\/div>\n <div><h4 className=\"text-xl font-bold text-white\">Tech & Install Pipeline<\/h4><p className=\"text-sm text-gray-400\">\ud558\ub4dc\uc6e8\uc5b4 \uc120\uc815\ubd80\ud130 \uc2dc\uc2a4\ud15c \uc548\uc815\ud654\uae4c\uc9c0\uc758 \uc815\ubc00 \uacf5\uc815<\/p><\/div>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-5 gap-4 relative\">\n <div className=\"hidden md:block absolute top-1\/2 left-0 w-full h-0.5 bg-zinc-800 -z-10 -translate-y-1\/2\"><\/div>\n {[{ step: \"01\", title: \"H\/W \uc124\uacc4 & \uc2dc\ubbac\ub808\uc774\uc158\", icon: <Cpu size={20}\/>, desc: \"\uacf5\uac04 \uc870\ub3c4\/\uac70\ub9ac\uc5d0 \ub530\ub978 \ud504\ub85c\uc81d\ud130\/LED \uc2a4\ud399 \uc0b0\ucd9c \ubc0f \ubc30\uce58 \uc2dc\ubbac\ub808\uc774\uc158\" }, { step: \"02\", title: \"\uc778\ud14c\ub9ac\uc5b4 & \ud558\ub4dc\uc6e8\uc5b4 \uc2dc\uacf5\", icon: <Hammer size={20}\/>, desc: \"\ube0c\ub77c\ucf13 \uc124\uce58, \ubc30\uc120 \uc791\uc5c5, \uc2a4\ud06c\ub9b0 \ub3c4\uc7a5 \ub4f1 \ubb3c\ub9ac\uc801 \ud658\uacbd \uad6c\ucd95\" }, { step: \"03\", title: \"\uc2dc\uc2a4\ud15c \uc14b\uc5c5\", icon: <Server size={20}\/>, desc: \"\ubbf8\ub514\uc5b4 \uc11c\ubc84 \uad6c\ucd95, \ub124\ud2b8\uc6cc\ud06c \ub9dd \uad6c\uc131, Watchout\/Resolume \uc138\ud305\" }, { step: \"04\", title: \"\ub9f5\ud551 & \uce98\ub9ac\ube0c\ub808\uc774\uc158\", icon: <Grid size={20}\/>, desc: \"\uc5e3\uc9c0 \ube14\ub80c\ub529(Edge Blending), \uc9c0\uc624\uba54\ud2b8\ub9ac \ubcf4\uc815\uc73c\ub85c \ud654\uba74 \uc65c\uace1 \uc81c\uac70\" }, { step: \"05\", title: \"QC & \uc720\uc9c0\ubcf4\uc218\", icon: <ShieldCheck size={20}\/>, desc: \"\ucd5c\uc885 \ub9ac\ud5c8\uc124, \uc2dc\uc2a4\ud15c \uc548\uc815\ud654 \ud14c\uc2a4\ud2b8 \ubc0f \uc6d0\uaca9 \uc81c\uc5b4 \uc2dc\uc2a4\ud15c \uad50\uc721\" }].map((item, idx) => (\n <div key={idx} className=\"bg-zinc-800 p-4 rounded-xl border border-white\/5 flex flex-col items-center text-center relative z-10 hover:border-teal-500 transition-colors\">\n <div className=\"w-8 h-8 rounded-full bg-zinc-900 border border-white\/10 flex items-center justify-center text-xs font-bold text-gray-500 mb-3\">{item.step}<\/div>\n <div className=\"text-teal-400 mb-2\">{item.icon}<\/div>\n <h5 className=\"font-bold text-sm mb-1\">{item.title}<\/h5>\n <p className=\"text-[11px] text-gray-400 leading-tight\">{item.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <div className=\"mt-8 p-4 bg-zinc-800\/30 rounded-xl border border-white\/10 flex items-center gap-4\">\n <div className=\"p-2 bg-teal-500\/20 rounded-full text-teal-400\"><Cable size={20} \/><\/div>\n <p className=\"text-xs text-gray-400\"><strong className=\"text-white\">Why Illusion?<\/strong> \uc77c\ub8e8\uc83c\uc740 \uc678\uc8fc \uc2dc\uacf5\uc744 \ub9e1\uae30\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \ub514\ud150\uce20 \uc81c\uc791\uc790\uac00 \uc758\ub3c4\ud55c \uc0c9\uac10\uacfc \ub514\ud14c\uc77c\uc744 100% \uad6c\ud604\ud558\uae30 \uc704\ud574 <span className=\"text-teal-400\">\uc790\uccb4 \ud14c\ud06c\ud300\uc774 \uc9c1\uc811 \ub9f5\ud551\ud558\uace0 \ud29c\ub2dd<\/span>\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/>\n )}\n <\/div>\n <\/div>\n )}\n\n <section id=\"case-study\" className=\"py-24 bg-zinc-950 border-t border-white\/10\">\n <div className=\"container mx-auto px-6\">\n <div className=\"flex flex-col md:flex-row gap-12\">\n <div className=\"md:w-1\/2\">\n <div className=\"sticky top-32\">\n <div className=\"inline-block px-3 py-1 bg-blue-900\/30 text-blue-400 rounded-full text-xs font-bold mb-4\">CASE STUDY 01<\/div>\n <h2 className=\"text-3xl md:text-5xl font-bold mb-6\">\uc8fc\ub958 \uae30\uc5c5 A\uc0ac\uc758<br \/><span className=\"text-blue-500\">\uc9c0\ud558 \uacf5\uac04 \ud601\uc2e0 \ud504\ub85c\uc81d\ud2b8<\/span><\/h2>\n <p className=\"text-gray-400 text-lg mb-8\">\"\uc9c0\ud558\ub77c\ub294 \ud3d0\uc1c4\uc801\uc778 \uacf5\uac04\uc744 \uace0\uac1d\ub4e4\uc774 \ucc3e\uc544\uc624\uace0 \uc2f6\uc740 \ud799\ud55c \ubbf8\ub514\uc5b4 \ub77c\uc6b4\uc9c0\ub85c \ubcc0\uc2e0\uc2dc\ud0ac \uc218 \uc788\uc744\uae4c?\"<\/p>\n <div className=\"bg-zinc-900 p-6 rounded-xl border-l-4 border-blue-500 mb-6\"><h4 className=\"font-bold text-white mb-2\">Before<\/h4><p className=\"text-gray-400 text-sm\">\ud3ec\uc2a4\ud130 \uba87 \uc7a5\uacfc \uc2dc\uc74c\ub300\ub9cc \ub193\uc778 \ud3c9\ubc94\ud55c \uacf5\uac04. \ub0ae\uc740 \uc811\uadfc\uc131\uacfc \uc5b4\ub450\uc6b4 \uc870\uba85\uc73c\ub85c \uace0\uac1d \uccb4\ub958 \uc2dc\uac04 10\ubd84 \ubbf8\ub9cc.<\/p><\/div>\n <div className=\"bg-zinc-900 p-6 rounded-xl border-l-4 border-purple-500\"><h4 className=\"font-bold text-white mb-2\">After (Media Space Branding)<\/h4><p className=\"text-gray-400 text-sm\">4\uba74 \ud30c\ub178\ub77c\ub9c8 \ub514\uc2a4\ud50c\ub808\uc774\ub85c \uc591\uc870\uc7a5\uc758 \ud604\uc7a5\uac10\uc744 \uc7ac\ud604. SNS \ubc14\uc774\ub7f4 \uc131\uacf5\uc73c\ub85c \uc6e8\uc774\ud305 \ubc1c\uc0dd \uba85\uc18c\ub85c \ub4f1\uadf9.<\/p><\/div>\n <\/div>\n <\/div>\n <div className=\"md:w-1\/2 flex flex-col gap-6\">\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden\">\n <div className=\"h-48 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_alcohol_1} alt=\"Site Analysis\" className=\"w-full h-full object-cover hover:scale-105 transition-transform duration-500\" \/><div className=\"absolute top-2 left-2 bg-black\/70 px-2 py-1 text-[10px] text-white rounded\">Step 1<\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 flex items-center gap-2\">\uacf5\uac04 \ubd84\uc11d \ubc0f \uc804\ub7b5<\/h3><p className=\"text-gray-400 text-sm\">\uc9c0\ud558\uc758 '\uc5b4\ub460'\uc744 \ubbf8\ub514\uc5b4 \uc544\ud2b8\uc758 '\uce94\ubc84\uc2a4'\ub85c \uc5ed\uc774\uc6a9. \uc678\ubd80 \ube5b \ucc28\ub2e8\uc744 \uc7a5\uc810\uc73c\ub85c \uc2b9\ud654\ud558\uc5ec \ud504\ub85c\uc81d\uc158 \ub9f5\ud551 \ucd5c\uc801\ud654.<\/p>\n <\/div>\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden\">\n <div className=\"h-48 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_alcohol_2} alt=\"Design Simulation\" className=\"w-full h-full object-cover hover:scale-105 transition-transform duration-500\" \/><div className=\"absolute top-2 left-2 bg-black\/70 px-2 py-1 text-[10px] text-white rounded\">Step 2<\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 flex items-center gap-2\">\ubab0\uc785\ud615 \ucf58\ud150\uce20<\/h3><p className=\"text-gray-400 text-sm\">\ubc14\ub2e5\uc5d0\ub294 \ud0c4\uc0b0 \uae30\ud3ec \uc601\uc0c1, \ubcbd\uba74\uc5d0\ub294 \ube0c\ub79c\ub4dc \uc2a4\ud1a0\ub9ac \ud30c\ub178\ub77c\ub9c8. \ud130\uce58 \uc2dc \ubc18\uc751\ud558\ub294 \uc778\ud130\ub799\ud2f0\ube0c \uc694\uc18c\ub85c \uccb4\ud5d8 \uadf9\ub300\ud654.<\/p>\n <\/div>\n <div className=\"bg-zinc-900\/80 p-8 rounded-2xl border border-white\/5 border-l-4 border-purple-600\"><h3 className=\"text-xl font-bold mb-4 flex items-center gap-2\"><span className=\"text-purple-400\">RESULT.<\/span> \uc131\uacfc<\/h3><p className=\"text-gray-300 text-sm\">\"\uc0ac\uc9c4 \ucc0d\uae30 \uc88b\uc740 \uc804\uc2dc \uacf5\uac04\"\uc73c\ub85c \uc785\uc18c\ubb38.<br\/>\ubc29\ubb38\uac1d \uccb4\ub958 \uc2dc\uac04 <span className=\"text-purple-400 font-bold\">300% \uc99d\uac00<\/span>.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section className=\"py-24 bg-black border-t border-white\/10\">\n <div className=\"container mx-auto px-6\">\n <div className=\"flex flex-col md:flex-row gap-12\">\n <div className=\"md:w-1\/2\">\n <div className=\"sticky top-32\">\n <div className=\"inline-block px-3 py-1 bg-pink-900\/30 text-pink-400 rounded-full text-xs font-bold mb-4\">CASE STUDY 02<\/div>\n <h2 className=\"text-3xl md:text-5xl font-bold mb-6\">\ud328\uc158 \uae30\uc5c5 B\uc0ac\uc758<br \/><span className=\"text-pink-500\">\uc548\uacbd \ube0c\ub79c\ub4dc \ub7f0\uce6d \uc1fc\ucf00\uc774\uc2a4<\/span><\/h2>\n <p className=\"text-gray-400 text-lg mb-8\">\"\ub2e8\uc21c\ud55c \uc548\uacbd \ucc29\uc6a9\uc744 \ub118\uc5b4, \ube0c\ub79c\ub4dc\uc758 '\uc138\uacc4\uad00'\uc744 \uc785\ub294 \uacbd\ud5d8\uc744 \uc5b4\ub5bb\uac8c \uc81c\uacf5\ud560 \uac83\uc778\uac00?\"<\/p>\n <div className=\"bg-zinc-900 p-6 rounded-xl border-l-4 border-pink-500\"><h4 className=\"font-bold text-white mb-2\">Concept: Future Vision<\/h4><p className=\"text-gray-400 text-sm\">\uc820\ud2c0\ubaac\uc2a4\ud130\uc640 \uac19\uc740 \uac15\ub82c\ud55c \uc624\ube0c\uc81c\uc640 \uc678\uacc4\uc801\uc778 \ub514\uc790\uc778 \ucee8\uc149. <br\/>\uc548\uacbd\uc744 \uc4f0\ub294 \uc21c\uac04, \uace0\uac1d \uc8fc\ubcc0\uc758 \uacf5\uac04(6\uba74)\uc774 \uc644\uc804\ud788 \uc0c8\ub85c\uc6b4 \ucc28\uc6d0\uc73c\ub85c \ubcc0\uc774\ub418\ub294 \ucd08\ud604\uc2e4 \uacbd\ud5d8 \uc81c\uacf5.<\/p><\/div>\n <div className=\"mt-8 flex flex-wrap gap-2\"><span className=\"px-3 py-1 bg-zinc-800 rounded-full text-xs text-gray-300 border border-white\/10\">#AR_Smart_Mirror<\/span><span className=\"px-3 py-1 bg-zinc-800 rounded-full text-xs text-gray-300 border border-white\/10\">#6_Side_Immersion<\/span><span className=\"px-3 py-1 bg-zinc-800 rounded-full text-xs text-gray-300 border border-white\/10\">#Interactive_Sound<\/span><\/div>\n <\/div>\n <\/div>\n <div className=\"md:w-1\/2 flex flex-col gap-6\">\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden group\">\n <div className=\"h-56 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_eyewear_1} alt=\"AR Kiosk Concept\" className=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" \/><div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/90 to-transparent p-4\"><div className=\"flex items-center gap-2 text-pink-400 font-bold text-sm\"><ScanFace size={16} \/> AR Smart Mirror<\/div><\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 text-white\">AR \ud0a4\uc624\uc2a4\ud06c & 6\uba74 \uc785\uccb4 \ub9f5\ud551<\/h3><p className=\"text-gray-400 text-sm leading-relaxed\">\uc0ac\uc6a9\uc790\uac00 \ud0a4\uc624\uc2a4\ud06c\uc5d0\uc11c \uc548\uacbd\uc744 \uac00\uc0c1 \uc2dc\ucc29(AR)\ud558\ub294 \uc21c\uac04, \ub9e4\uc7a5\uc758 <strong>\ubc14\ub2e5, \ubcbd, \ucc9c\uc7a5 \ub4f1 6\uba74<\/strong>\uc774 \ube0c\ub79c\ub4dc\uc758 \uc678\uacc4 \ud589\uc131 \ucee8\uc149 \uc601\uc0c1\uc73c\ub85c \uc804\ud658\ub429\ub2c8\ub2e4. \uc548\uacbd \uc885\ub958\uc5d0 \ub530\ub77c \ubc30\uacbd\uc774 \ubc14\ub00c\uba70 \uc555\ub3c4\uc801\uc778 \ubab0\uc785\uac10\uc744 \uc120\uc0ac\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden group\">\n <div className=\"h-56 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_eyewear_2} alt=\"Interactive Wall\" className=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" \/><div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/90 to-transparent p-4\"><div className=\"flex items-center gap-2 text-blue-400 font-bold text-sm\"><Zap size={16} \/> Interactive Art<\/div><\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 text-white\">\ubc18\uc751\ud615 \uc0ac\uc6b4\ub4dc & \uc778\ud130\ub799\ud2f0\ube0c \uc6d4<\/h3><p className=\"text-gray-400 text-sm leading-relaxed\">\ub2e8\uc21c\ud55c \uc601\uc0c1 \uc7ac\uc0dd\uc774 \uc544\ub2d9\ub2c8\ub2e4. \uace0\uac1d\uc774 \ubcbd\uba74\uc5d0 \ub2e4\uac00\uac08\uc218\ub85d <strong>\uc785\uccb4 \uc0ac\uc6b4\ub4dc(3D Audio)<\/strong>\uac00 \uc6c5\uc7a5\ud558\uac8c \ubcc0\ud558\uace0, \uc601\uc0c1\uc758 \uadf8\ub798\ud53d \ud328\ud134\uc774 \ubb3c\uacb0\uce58\ub4ef \ubc18\uc751\ud569\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div className=\"bg-zinc-900\/80 p-5 rounded-2xl border border-white\/5\"><h4 className=\"font-bold text-white mb-2 flex items-center gap-2\"><Clock size={16} className=\"text-purple-400\" \/> \ud0c0\uc784 \uc26c\ud504\ud2b8 \ub514\uc2a4\ud50c\ub808\uc774<\/h4><p className=\"text-xs text-gray-400\">\uc2dc\uac04\ub300(\ub0ae\/\ubc24)\uc5d0 \ub530\ub77c \ub9e4\uc7a5\uc758 \uc804\uccb4\uc801\uc778 \uceec\ub7ec \ucee8\uc149\uacfc \uc8fc\ub825 \uc0c1\ud488 \ub514\uc2a4\ud50c\ub808\uc774\uac00 \uc790\ub3d9\uc73c\ub85c \ubcc0\uacbd\ub418\uc5b4, \uc7ac\ubc29\ubb38 \uc2dc\uc5d0\ub3c4 \uc0c8\ub85c\uc6b4 \ub290\ub08c\uc744 \uc90d\ub2c8\ub2e4.<\/p><\/div>\n <div className=\"bg-zinc-900\/80 p-5 rounded-2xl border border-white\/5\"><h4 className=\"font-bold text-white mb-2 flex items-center gap-2\"><Smartphone size={16} className=\"text-purple-400\" \/> \ud64d\ubcf4 \uc5f0\uacc4<\/h4><p className=\"text-xs text-gray-400\">\ud0a4\uc624\uc2a4\ud06c \uccb4\ud5d8 \uc601\uc0c1\uacfc \ub9e4\uc7a5 \ubd84\uc704\uae30\ub97c \ub2f4\uc740 \uc20f\ud3fc \uc601\uc0c1\uc774 \uc790\ub3d9 \uc0dd\uc131\ub418\uc5b4 \uc778\uc2a4\ud0c0\uadf8\ub7a8 \ud64d\ubcf4 \ud398\uc774\uc9c0\uc5d0 \uc989\uc2dc \uc5c5\ub85c\ub4dc\ub429\ub2c8\ub2e4.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section className=\"py-24 bg-zinc-950 border-t border-white\/10\">\n <div className=\"container mx-auto px-6\">\n <div className=\"flex flex-col md:flex-row gap-12\">\n <div className=\"md:w-1\/2\">\n <div className=\"sticky top-32\">\n <div className=\"inline-block px-3 py-1 bg-teal-900\/30 text-teal-400 rounded-full text-xs font-bold mb-4\">CASE STUDY 03<\/div>\n <h2 className=\"text-3xl md:text-5xl font-bold mb-6\">\ub9ac\uc870\ud2b8 C\uc0ac\uc758<br \/><span className=\"text-teal-500\">\ub3c4\uc2ec \uc18d \ud504\ub9ac\ubbf8\uc5c4 \uc1fc\ub8f8<\/span><\/h2>\n <p className=\"text-gray-400 text-lg mb-8\">\"\uba3c \ubc14\ub2f7\uac00\uc5d0 \uc788\ub294 \ub9ac\uc870\ud2b8\uc758 \uac10\ub3d9\uc744, \ub3c4\uc2ec \ud55c\ubcf5\ud310\uc5d0\uc11c \uc644\ubcbd\ud558\uac8c \uccb4\ud5d8\ud558\uac8c \ud560 \uc218 \uc5c6\uc744\uae4c?\"<\/p>\n <div className=\"bg-zinc-900 p-6 rounded-xl border-l-4 border-teal-500\"><h4 className=\"font-bold text-white mb-2\">Concept: The Ocean Here<\/h4><p className=\"text-gray-400 text-sm\">\uc2dc\uacf5\uac04\uc744 \ucd08\uc6d4\ud55c \ub9ac\uc870\ud2b8 \uacbd\ud5d8. 120\ud3c9 \uaddc\ubaa8\uc758 \ub300\ud615 \uacf5\uac04 \uc804\uccb4\ub97c \ubbf8\ub514\uc5b4\uc640 \ubb3c\ub9ac\uc801 \uc7a5\uce58(\ucee4\ud2bc, \ubc14\ub78c)\ub85c \uac10\uc2f8, \uc2e4\uc81c \ubc14\ub2f7\uac00 \ub9ac\uc870\ud2b8 \uac1d\uc2e4\uc5d0 \uc788\ub294 \ub4ef\ud55c 4D \uacbd\ud5d8\uc744 \uc81c\uacf5.<\/p><\/div>\n <div className=\"mt-8 flex flex-wrap gap-2\"><span className=\"px-3 py-1 bg-zinc-800 rounded-full text-xs text-gray-300 border border-white\/10\">#120\ud3c9_CurtainWall_View<\/span><span className=\"px-3 py-1 bg-zinc-800 rounded-full text-xs text-gray-300 border border-white\/10\">#Media_Dining<\/span><span className=\"px-3 py-1 bg-zinc-800 rounded-full text-xs text-gray-300 border border-white\/10\">#Wind_Effect<\/span><\/div>\n <\/div>\n <\/div>\n <div className=\"md:w-1\/2 flex flex-col gap-6\">\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden group\">\n <div className=\"h-56 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_resort_1} alt=\"Ocean View\" className=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" \/><div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/90 to-transparent p-4\"><div className=\"flex items-center gap-2 text-teal-400 font-bold text-sm\"><Waves size={16} \/> 120\ud3c9 \uc624\uc158\ubdf0 & \uc2a4\ud30c<\/div><\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 text-white\">\uc555\ub3c4\uc801\uc778 \ub300\ud615 \ucee4\ud2bc\uc6d4 \ubdf0<\/h3><p className=\"text-gray-400 text-sm leading-relaxed\">\ubcbd\uba74 \uc804\uccb4\ub97c \uac10\uc2f8\ub294 \ucd08\ub300\ud615 \ubbf8\ub514\uc5b4\uc6d4\uc774 120\ud3c9 \ub9ac\uc870\ud2b8\uc758 \ud0c1 \ud2b8\uc778 \ubc14\ub2e4 \uc804\ub9dd\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4. \uc2a4\ud30c \uc2dc\uc124 \uccb4\ud5d8\uc874\uc5d0\uc11c\ub294 \ubb3c\uacb0\uc758 \ubc18\uc9dd\uc784\uacfc \ud30c\ub3c4 \uc18c\ub9ac\uac00 \uc5b4\uc6b0\ub7ec\uc838 \uc2e4\uc81c \ud734\uc591\uc9c0\uc5d0 \uc628 \ub4ef\ud55c \ucc29\uac01\uc744 \ubd88\ub7ec\uc77c\uc73c\ud0b5\ub2c8\ub2e4.<\/p>\n <\/div>\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden group\">\n <div className=\"h-56 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_resort_2} alt=\"Night Dining\" className=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" \/><div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/90 to-transparent p-4\"><div className=\"flex items-center gap-2 text-amber-400 font-bold text-sm\"><Wine size={16} \/> \ubbf8\ub514\uc5b4 \ub2e4\uc774\ub2dd & \uc7ac\uc988<\/div><\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 text-white\">\ubc24\ubc14\ub2e4\uc758 \ub0ad\ub9cc, \ubbf8\ub514\uc5b4 \ub2e4\uc774\ub2dd<\/h3><p className=\"text-gray-400 text-sm leading-relaxed\">\uc870\uba85\uc774 \uc5b4\ub450\uc6cc\uc9c0\uba74 \uacf5\uac04\uc740 \uace0\uae09 \ub2e4\uc774\ub2dd \ubc14\ub85c \ubcc0\ud569\ub2c8\ub2e4. \uc794\uc794\ud55c \uc7ac\uc988 \uc74c\uc545\uacfc \ud568\uaed8, \uc800 \uba40\ub9ac \uc218\ud3c9\uc120\uc5d0\uc11c \uc544\ub978\uac70\ub9ac\ub294 <strong>\uc624\uc9d5\uc5b4\uc7a1\uc774 \ubc30\uc758 \ubd88\ube5b<\/strong>\uc774 \ubbf8\ub514\uc5b4\uc544\ud2b8\ub85c \uc5f0\ucd9c\ub418\uc5b4 \uac10\uc131\uc801\uc778 \uc800\ub141 \uc2dd\uc0ac\ub97c \uc644\uc131\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden group\">\n <div className=\"h-40 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_resort_3} alt=\"Wind Effect\" className=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" \/><div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/90 to-transparent p-4\"><div className=\"flex items-center gap-2 text-gray-300 font-bold text-sm\"><Wind size={16} \/> Synesthesia Effect<\/div><\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 text-white flex items-center gap-2\">\uc624\uac10\uc744 \uae68\uc6b0\ub294 \ub514\ud14c\uc77c<\/h3><p className=\"text-gray-400 text-sm leading-relaxed\">\ub2e8\uc21c\ud55c \uc601\uc0c1 \uc2dc\uccad\uc774 \uc544\ub2d9\ub2c8\ub2e4. \uc800\ub141 \ubc14\ub2f7\ubc14\ub78c\uc5d0 \ud769\ub0a0\ub9ac\ub294 <strong>\uc2e4\uc81c \ucee4\ud2bc<\/strong>\uacfc <strong>\uc1a1\ud48d \uc7a5\uce58(Wind Effect)<\/strong>\ub97c \ud1b5\ud574 \uc0b4\ub791\uc774\ub294 \ubc14\ub78c\uc744 \uc2e4\uc81c\ub85c \ub290\ub07c\uac8c \ud558\uc5ec \ubab0\uc785\uac10\uc744 \uadf9\ub300\ud654\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"contact\" className=\"py-24 bg-gradient-to-t from-purple-900\/20 to-black text-center\">\n <div className=\"container mx-auto px-6\">\n <h2 className=\"text-3xl md:text-5xl font-bold mb-6\">\uadc0\uc0ac\uc758 \uacf5\uac04\ub3c4 <br\/><span className=\"text-purple-500\">\ud601\uc2e0\uc801\uc778 \ube0c\ub79c\ub4dc \uacbd\ud5d8<\/span>\uc774 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/h2>\n <p className=\"text-gray-400 mb-10 max-w-xl mx-auto\">\ub9c9\uc5f0\ud55c \uc544\uc774\ub514\uc5b4\ub9cc \uc788\uc5b4\ub3c4 \uad1c\ucc2e\uc2b5\ub2c8\ub2e4. <br\/>\uc77c\ub8e8\uc83c(ILLUSION)\uc774 \ud574\ub2f5\uc744 \uc81c\uc2dc\ud574 \ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n <div className=\"max-w-md mx-auto bg-zinc-900 p-8 rounded-2xl border border-white\/10 text-left mb-16\">\n <form className=\"space-y-4\" onSubmit={handleCF7Submit}>\n <div>\n <label className=\"block text-xs font-bold text-gray-500 mb-1\">\ud68c\uc0ac\uba85 \/ \ub2f4\ub2f9\uc790<\/label>\n <input type=\"text\" name=\"company\" value={formData.company} onChange={handleInputChange} className=\"w-full bg-zinc-800 border border-zinc-700 rounded p-3 text-white focus:outline-none focus:border-purple-500 transition-colors\" placeholder=\"\uc608) \ubbf8\ub514\uc5b4\uc8fc\uc2dd\ud68c\uc0ac \/ \ud64d\uae38\ub3d9\" required disabled={submitStatus === 'submitting'} \/>\n <\/div>\n <div>\n <label className=\"block text-xs font-bold text-gray-500 mb-1\">\uc5f0\ub77d\ucc98<\/label>\n <input type=\"text\" name=\"contact\" value={formData.contact} onChange={handleInputChange} className=\"w-full bg-zinc-800 border border-zinc-700 rounded p-3 text-white focus:outline-none focus:border-purple-500 transition-colors\" placeholder=\"010-0000-0000\" required disabled={submitStatus === 'submitting'} \/>\n <\/div>\n <div>\n <label className=\"block text-xs font-bold text-gray-500 mb-1\">\ubb38\uc758 \ub0b4\uc6a9<\/label>\n <textarea name=\"message\" value={formData.message} onChange={handleInputChange} className=\"w-full bg-zinc-800 border border-zinc-700 rounded p-3 text-white focus:outline-none focus:border-purple-500 h-24 transition-colors\" placeholder=\"\ub300\ub7b5\uc801\uc778 \ud3c9\uc218, \uc5c5\uc885, \uace0\ubbfc\uc0ac\ud56d\uc744 \uc801\uc5b4\uc8fc\uc138\uc694.\" required disabled={submitStatus === 'submitting'}><\/textarea>\n <\/div>\n <button type=\"submit\" className={`w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 rounded-lg transition-all flex items-center justify-center gap-2 shadow-lg shadow-purple-900\/20 ${submitStatus === 'submitting' ? 'opacity-70 cursor-wait' : ''}`} disabled={submitStatus === 'submitting'}>\n {submitStatus === 'submitting' ? (\n <><Loader className=\"animate-spin\" size={20} \/> \uc804\uc1a1 \uc911...<\/>\n ) : (\n <>\ubb34\ub8cc \ucee8\uc124\ud305 \uc2e0\uccad\ud558\uae30 <ArrowRight size={18} \/><\/>\n )}\n <\/button>\n <\/form>\n <\/div>\n \n <div className=\"border-t border-white\/10 pt-12 pb-6\">\n <div className=\"flex flex-col items-center justify-center text-zinc-500 text-xs space-y-2\">\n <div className=\"flex items-center gap-2 mb-2\">\n\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<figure class=\"wp-block-jetpack-image-compare\"><div class=\"juxtapose\" data-mode=\"horizontal\"><img class=\"image-compare__image-before\"\/><img class=\"image-compare__image-after\"\/><\/div><\/figure>\n\n\n\n<div class=\"wp-block-cover is-light\"><video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"https:\/\/illusion.place\/wp-content\/uploads\/2024\/11\/forest2.mp4\" data-object-fit=\"cover\"><\/video><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-white-color has-text-color has-link-color wp-elements-2bcec1c99cf43a755680e5482423b850\" style=\"font-size:25px\">\uc0c8\ub85c\uc6b4 \ubab0\uc785\ud615 \uacf5\uac04\uc758 \uacbd\ud5d8.<\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>ILLUSION – Media Space Branding<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"footnotes":""},"class_list":["post-1594","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/pages\/1594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/illusion.place\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1594"}],"version-history":[{"count":68,"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/pages\/1594\/revisions"}],"predecessor-version":[{"id":2688,"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/pages\/1594\/revisions\/2688"}],"wp:attachment":[{"href":"https:\/\/illusion.place\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

$\"\"$ <\/span>

<\/p>\n<\/div><\/div>\n\n\n\n\n\n\n \n \n ILLUSION – Media Space Branding<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\n\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['Noto Sans KR', 'sans-serif'],\n },\n animation: {\n 'fade-in-up': 'fadeInUp 0.8s ease-out forwards',\n },\n keyframes: {\n fadeInUp: {\n '0%': { opacity: '0', transform: 'translateY(20px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n }\n }\n }\n }\n }\n <\/script>\n <style>\n \/* --- \uc6cc\ub4dc\ud504\ub808\uc2a4 \ud14c\ub9c8 \uac04\uc12d \ubc29\uc9c0 \uc2a4\ud0c0\uc77c --- *\/\n header, nav, .nav-menu, .menu-item, .page_item, .menu-item a, .page_item a {\n border: none !important;\n box-shadow: none !important;\n background-image: none !important; \n }\n table, tr, td, th, ul, li {\n border: none !important;\n }\n \n \/* [\uc911\uc694] \ud398\uc774\uc9c0 \uaddc\uaca9\uc5d0 \ub9de\ucda4 (\uac00\ub85c \uc2a4\ud06c\ub864 \ubc29\uc9c0) *\/\n #root {\n width: 100%; \n max-width: 100%; \n margin: 0 auto; \n position: relative;\n overflow-x: hidden; \n }\n \n \/* \ubc30\uacbd\uc0c9 \ubc0f \uae30\ubcf8 \uc124\uc815 *\/\n body { margin: 0; padding: 0; background-color: black; color: white; overflow-x: hidden; }\n \n .custom-scrollbar::-webkit-scrollbar { width: 6px; }\n .custom-scrollbar::-webkit-scrollbar-track { background: #18181b; }\n .custom-scrollbar::-webkit-scrollbar-thumb { background: #581c87; border-radius: 3px; }\n \n #root div, #root span, #root p { border: inherit; } \n <\/style>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ ==========================================\n \/\/ [\uc124\uc815] Contact Form 7 \uc22b\uc790 ID \uc785\ub825\n \/\/ ==========================================\n const CF7_FORM_ID = 2145; \/\/ \uc785\ub825\ud558\uc2e0 ID \uc720\uc9c0\n \/\/ ==========================================\n\n\n \/\/ --- ICON COMPONENTS ---\n const Icon = ({ children, className, size = 24, ...props }) => (\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className} {...props}>\n {children}\n <\/svg>\n );\n\n const Box = (props) => <Icon {...props}><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"\/><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"\/><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"\/><\/Icon>;\n const Layers = (props) => <Icon {...props}><polygon points=\"12 2 2 7 12 12 22 7 12 2\"\/><polyline points=\"2 17 12 22 22 17\"\/><polyline points=\"2 12 12 17 22 12\"\/><\/Icon>;\n const Lightbulb = (props) => <Icon {...props}><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-1 1.5-2.4 1.5-3.8 0-3.2-2.8-5.7-6-5.7s-6 2.5-6 5.7c0 1.4.5 2.8 1.5 3.8.8.8 1.3 1.5 1.5 2.5\"\/><path d=\"M9 18h6\"\/><path d=\"M10 22h4\"\/><\/Icon>;\n const MonitorPlay = (props) => <Icon {...props}><path d=\"m10 7 5 3-5 3Z\"\/><rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"\/><path d=\"M12 17v4\"\/><path d=\"M8 21h8\"\/><\/Icon>;\n const Users = (props) => <Icon {...props}><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/Icon>;\n const ArrowRight = (props) => <Icon {...props}><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/Icon>;\n const Maximize = (props) => <Icon {...props}><path d=\"M8 3H5a2 2 0 0 0-2 2v3\"\/><path d=\"M21 8V5a2 2 0 0 0-2-2h-3\"\/><path d=\"M3 16v3a2 2 0 0 0 2 2h3\"\/><path d=\"M16 21h3a2 2 0 0 0 2-2v-3\"\/><\/Icon>;\n const Zap = (props) => <Icon {...props}><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/Icon>;\n const Menu = (props) => <Icon {...props}><line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\"\/><line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\"\/><line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\"\/><\/Icon>;\n const X = (props) => <Icon {...props}><path d=\"M18 6 6 18\"\/><path d=\"m6 6 18 18\"\/><\/Icon>;\n const ChevronDown = (props) => <Icon {...props}><path d=\"m6 9 6 6 6-6\"\/><\/Icon>;\n const Play = (props) => <Icon {...props}><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/Icon>;\n const Smartphone = (props) => <Icon {...props}><rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\"\/><path d=\"M12 18h.01\"\/><\/Icon>;\n const ScanFace = (props) => <Icon {...props}><path d=\"M3 7V5a2 2 0 0 1 2-2h2\"\/><path d=\"M17 3h2a2 2 0 0 1 2 2v2\"\/><path d=\"M21 17v2a2 2 0 0 1-2 2h-2\"\/><path d=\"M7 21H5a2 2 0 0 1-2-2v-2\"\/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"\/><path d=\"M9 9h.01\"\/><path d=\"M15 9h.01\"\/><\/Icon>;\n const Clock = (props) => <Icon {...props}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/Icon>;\n const Waves = (props) => <Icon {...props}><path d=\"M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1\"\/><path d=\"M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1\"\/><path d=\"M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1\"\/><\/Icon>;\n const Wine = (props) => <Icon {...props}><path d=\"M8 22h8\"\/><path d=\"M7 10h10\"\/><path d=\"M12 15v7\"\/><path d=\"M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z\"\/><\/Icon>;\n const Wind = (props) => <Icon {...props}><path d=\"M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2\"\/><path d=\"M9.6 4.6A2 2 0 1 1 11 8H2\"\/><path d=\"M12.6 19.4A2 2 0 1 0 14 16H2\"\/><\/Icon>;\n const Gamepad2 = (props) => <Icon {...props}><line x1=\"6\" x2=\"10\" y1=\"11\" y2=\"11\"\/><line x1=\"8\" x2=\"8\" y1=\"9\" y2=\"13\"\/><line x1=\"15\" x2=\"15.01\" y1=\"12\" y2=\"12\"\/><line x1=\"18\" x2=\"18.01\" y1=\"10\" y2=\"10\"\/><path d=\"M17.3 19.79a3.5 3.5 0 0 0 4.2-3.87 3.5 3.5 0 0 0-4.63-4.63l-2.43.91a3.5 3.5 0 0 1-2.88 0l-2.43-.91A3.5 3.5 0 0 0 4.5 15.92a3.5 3.5 0 0 0 4.2 3.87L12 19Z\"\/><\/Icon>;\n const Cpu = (props) => <Icon {...props}><rect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\"\/><rect width=\"6\" height=\"6\" x=\"9\" y=\"9\" rx=\"1\"\/><path d=\"M15 2v2\"\/><path d=\"M15 20v2\"\/><path d=\"M2 15h2\"\/><path d=\"M2 9h2\"\/><path d=\"M20 15h2\"\/><path d=\"M20 9h2\"\/><path d=\"M9 2v2\"\/><path d=\"M9 20v2\"\/><\/Icon>;\n const Video = (props) => <Icon {...props}><path d=\"m22 8-6 4 6 4V8Z\"\/><rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\"\/><\/Icon>;\n const Palette = (props) => <Icon {...props}><circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"\/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"\/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"\/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"\/><path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\"\/><\/Icon>;\n const Code = (props) => <Icon {...props}><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/Icon>;\n const Hammer = (props) => <Icon {...props}><path d=\"m15 12-8.5 8.5c-.83.83-2.17.83-3 0 0 0 0 0 0 0a2.12 2.12 0 0 1 0-3L12 9\"\/><path d=\"M17.64 15 22 10.64\"\/><path d=\"m20.91 11.7-1.25-1.25c-.6-.6-.93-1.4-.93-2.25V7.86c0-.55-.45-1-1-1H14.14c-.83 0-1.64-.32-2.25-.94l-1.03-1.03a1.67 1.67 0 0 0-2.32 0l-.6.6c-.63.63-.63 1.71 0 2.36l6.18 6.17c.63.63 1.71.63 2.36 0l.6-.6a1.67 1.67 0 0 0 0-2.32Z\"\/><\/Icon>;\n const Wrench = (props) => <Icon {...props}><path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"\/><\/Icon>;\n const Server = (props) => <Icon {...props}><rect width=\"20\" height=\"8\" x=\"2\" y=\"2\" rx=\"2\" ry=\"2\"\/><rect width=\"20\" height=\"8\" x=\"2\" y=\"14\" rx=\"2\" ry=\"2\"\/><line x1=\"6\" x2=\"6.01\" y1=\"6\" y2=\"6\"\/><line x1=\"6\" x2=\"6.01\" y1=\"18\" y2=\"18\"\/><\/Icon>;\n const Grid = (props) => <Icon {...props}><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"\/><line x1=\"3\" x2=\"21\" y1=\"9\" y2=\"9\"\/><line x1=\"3\" x2=\"21\" y1=\"15\" y2=\"15\"\/><line x1=\"9\" x2=\"9\" y1=\"3\" y2=\"21\"\/><line x1=\"15\" x2=\"15\" y1=\"3\" y2=\"21\"\/><\/Icon>;\n const ShieldCheck = (props) => <Icon {...props}><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/Icon>;\n const Cable = (props) => <Icon {...props}><path d=\"M17 21v-2a1 1 0 0 1-1-1v-1a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1\"\/><path d=\"M19 15V6.5a1 1 0 0 0-7 0v11a1 1 0 0 1-7 0V9\"\/><path d=\"M21 21v-2h-4\"\/><path d=\"M3 5h4V3\"\/><path d=\"M7 5a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a1 1 0 0 1 1-1V3\"\/><\/Icon>;\n const Tent = (props) => <Icon {...props}><path d=\"M3.5 21 14 3\"\/><path d=\"M20.5 21 10 3\"\/><path d=\"M15.5 21 12 15l-3.5 6\"\/><path d=\"M2 21h20\"\/><\/Icon>;\n const Loader = (props) => <Icon {...props}><path d=\"M21 12a9 9 0 1 1-6.219-8.56\"\/><\/Icon>;\n\n const MEDIA_ASSETS = {\n heroBackgroundVideo: \"https:\/\/assets.mixkit.co\/videos\/preview\/mixkit-abstract-purple-lights-background-3047-large.mp4\", \n conceptImage: \"https:\/\/images.unsplash.com\/photo-1492684223066-81342ee5ff30?q=80&w=2070&auto=format&fit=crop\",\n caseStudy_alcohol_1: \"https:\/\/images.unsplash.com\/photo-1514362545857-3bc16c4c7d1b?q=80&w=1000&auto=format&fit=crop\", \n caseStudy_alcohol_2: \"https:\/\/illusion.place\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_9ppa2t9ppa2t9ppa-scaled.png\", \n caseStudy_eyewear_1: \"https:\/\/illusion.place\/wp-content\/uploads\/2025\/11\/unnamed.jpg\", \n caseStudy_eyewear_2: \"https:\/\/illusion.place\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_mfakhjmfakhjmfak-scaled.png\", \n caseStudy_resort_1: \"https:\/\/images.unsplash.com\/photo-1571003123894-1f0594d2b5d9?q=80&w=1000&auto=format&fit=crop\", \n caseStudy_resort_2: \"https:\/\/illusion.place\/wp-content\/uploads\/2025\/11\/unnamed-1.jpg\", \n caseStudy_resort_3: \"https:\/\/illusion.place\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_52dc9d52dc9d52dc.png\", \n construction_popup: \"https:\/\/images.unsplash.com\/photo-1563293887-251f04471905?q=80&w=1000&auto=format&fit=crop\",\n construction_signature: \"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=1000&auto=format&fit=crop\",\n construction_mediaRoom: \"https:\/\/images.unsplash.com\/photo-1596701886708-8f8319f35759?q=80&w=1000&auto=format&fit=crop\", \n };\n\n const App = () => {\n const [isScrolled, setIsScrolled] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [activeModal, setActiveModal] = useState(null); \n \n const [formData, setFormData] = useState({ company: '', contact: '', message: '' });\n const [submitStatus, setSubmitStatus] = useState('idle'); \/\/ idle, submitting, success, error\n\n useEffect(() => {\n const handleScroll = () => setIsScrolled(window.scrollY > 50);\n window.addEventListener('scroll', handleScroll);\n return () => window.removeEventListener('scroll', handleScroll);\n }, []);\n\n const scrollToSection = (id) => {\n const element = document.getElementById(id);\n if (element) element.scrollIntoView({ behavior: 'smooth' });\n setMobileMenuOpen(false);\n };\n\n const closeModal = () => setActiveModal(null);\n\n const handleInputChange = (e) => {\n const { name, value } = e.target;\n setFormData({ ...formData, [name]: value });\n };\n\n \/\/ Contact Form 7 AJAX Submission\n const handleCF7Submit = async (e) => {\n e.preventDefault();\n setSubmitStatus('submitting');\n\n \/\/ 1. Form Data \uad6c\uc131 (CF7 \ud544\ub4dc\uba85\uacfc \ub9e4\uce6d)\n \/\/ [\uc8fc\uc758] CF7 \ud3fc\uc5d0 \uc124\uc815\ud55c \ud544\ub4dc\uba85(name)\uacfc \uc815\ud655\ud788 \uc77c\uce58\ud574\uc57c \ud569\ub2c8\ub2e4.\n const body = new FormData();\n body.append('cf-company', formData.company);\n body.append('cf-contact', formData.contact);\n body.append('cf-message', formData.message);\n body.append('_wpcf7_unit_tag', 'rte'); \n\n \/\/ 2. \uc6cc\ub4dc\ud504\ub808\uc2a4 REST API \uacbd\ub85c (\uace0\uc720\uc8fc\uc18c \uc124\uc815\uc5d0 \ub530\ub978 \ubd84\uae30)\n \/\/ \ud604\uc7ac \uc0ac\uc774\ud2b8 \uc8fc\uc18c\uac00 ?page_id= \ud615\uc2dd\uc774\ubbc0\ub85c, \uae30\ubcf8(Plain) \uace0\uc720\uc8fc\uc18c\uc6a9 API \uacbd\ub85c\ub97c \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.\n \/\/ \uc774 \uc8fc\uc18c\ub294 \uace0\uc720\uc8fc\uc18c \uc124\uc815\uacfc \uc0c1\uad00\uc5c6\uc774 \uc791\ub3d9\ud558\ub294 \uc548\uc804\ud55c \ubc29\uc2dd\uc785\ub2c8\ub2e4.\n const apiUrl = `${window.location.origin}\/?rest_route=\/contact-form-7\/v1\/contact-forms\/${CF7_FORM_ID}\/feedback`;\n\n try {\n const response = await fetch(apiUrl, {\n method: 'POST',\n body: body\n });\n \n \/\/ \uc751\ub2f5\uc774 HTML\uc774\uac70\ub098 404\uc778 \uacbd\uc6b0 \uccb4\ud06c\n if (!response.ok) {\n throw new Error(`HTTP Error: ${response.status}`);\n }\n\n const result = await response.json();\n\n if (result.status === 'mail_sent') {\n setSubmitStatus('success');\n setFormData({ company: '', contact: '', message: '' });\n alert('\ubb38\uc758\uac00 \uc131\uacf5\uc801\uc73c\ub85c \uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ub2f4\ub2f9\uc790\uac00 \uace7 \uc5f0\ub77d\ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4.');\n } else {\n console.error('CF7 Error:', result);\n setSubmitStatus('error');\n \/\/ \uc2e4\ud328 \uc6d0\uc778 \uba54\uc2dc\uc9c0 \ucd9c\ub825 (\uc720\ud6a8\uc131 \uac80\uc0ac \uc2e4\ud328 \ub4f1)\n alert('\uc804\uc1a1 \uc2e4\ud328: ' + result.message);\n }\n } catch (error) {\n console.error('Network Error:', error);\n setSubmitStatus('error');\n alert(`\ub124\ud2b8\uc6cc\ud06c \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.\\n\\n\uc6d0\uc778: ${error.message}\\n\\nTip: Contact Form 7 \ud50c\ub7ec\uadf8\uc778\uc774 \ud65c\uc131\ud654\ub418\uc5b4 \uc788\ub294\uc9c0, ID(${CF7_FORM_ID})\uac00 \uc815\ud655\ud55c\uc9c0 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n } finally {\n setSubmitStatus('idle');\n }\n };\n\n return (\n <div className=\"min-h-screen bg-black text-white font-sans selection:bg-purple-500 selection:text-white overflow-x-hidden\">\n \n <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${isScrolled ? 'bg-black\/90 backdrop-blur-md border-b border-white\/10 py-4' : 'bg-transparent py-6'}`}>\n <div className=\"container mx-auto px-6 flex justify-between items-center\">\n <div className=\"text-2xl font-bold tracking-tighter flex items-center gap-2 cursor-pointer\" onClick={() => window.scrollTo(0,0)}>\n\n <\/div>\n <div className=\"hidden md:flex gap-8 items-center text-sm font-medium text-gray-300\">\n <button onClick={() => scrollToSection('about')} className=\"hover:text-white transition-colors\">\uc11c\ube44\uc2a4 \uc18c\uac1c<\/button>\n <button onClick={() => scrollToSection('process')} className=\"hover:text-white transition-colors\">\uc9c4\ud589 \uacfc\uc815<\/button>\n <button onClick={() => scrollToSection('case-study')} className=\"hover:text-white transition-colors\">\uc131\uacf5 \uc0ac\ub840<\/button>\n <button onClick={() => scrollToSection('contact')} className=\"px-5 py-2 bg-white text-black rounded-full font-bold hover:bg-purple-500 hover:text-white transition-all\">\ubb38\uc758\ud558\uae30<\/button>\n <\/div>\n <button className=\"md:hidden text-white\" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>\n {mobileMenuOpen ? <X \/> : <Menu \/>}\n <\/button>\n <\/div>\n {mobileMenuOpen && (\n <div className=\"md:hidden absolute top-full left-0 w-full bg-black border-b border-white\/10 p-6 flex flex-col gap-4 shadow-2xl\">\n <button onClick={() => scrollToSection('about')} className=\"text-left text-gray-300 py-2\">\uc11c\ube44\uc2a4 \uc18c\uac1c<\/button>\n <button onClick={() => scrollToSection('process')} className=\"text-left text-gray-300 py-2\">\uc9c4\ud589 \uacfc\uc815<\/button>\n <button onClick={() => scrollToSection('case-study')} className=\"text-left text-gray-300 py-2\">\uc131\uacf5 \uc0ac\ub840<\/button>\n <button onClick={() => scrollToSection('contact')} className=\"text-left text-purple-400 font-bold py-2\">\ubb38\uc758\ud558\uae30<\/button>\n <\/div>\n )}\n <\/nav>\n\n <section className=\"relative h-screen flex items-center justify-center overflow-hidden\">\n <div className=\"absolute inset-0 z-0\">\n <video autoPlay loop muted playsInline className=\"w-full h-full object-cover opacity-60\">\n <source src={MEDIA_ASSETS.heroBackgroundVideo} type=\"video\/mp4\" \/>\n <\/video>\n <div className=\"absolute inset-0 bg-gradient-to-b from-black\/70 via-black\/40 to-black\"><\/div>\n <\/div>\n <div className=\"container mx-auto px-6 relative z-10 text-center\">\n <div className=\"inline-block px-4 py-1 mb-6 border border-purple-500\/50 rounded-full bg-purple-900\/30 backdrop-blur-sm text-purple-300 text-sm font-medium animate-fade-in-up\">\n \ubbf8\ub514\uc5b4 \uc544\ud2b8 \u00d7 \uacf5\uac04 \ube0c\ub79c\ub529\n <\/div>\n <h1 className=\"text-5xl md:text-7xl font-bold leading-tight mb-8 drop-shadow-2xl\">\n \uacf5\uac04\uc744 <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500\">\uc0b4\uc544\uc788\ub294 \ubab0\uc785\ud615\uacbd\ud5d8<\/span>\uc73c\ub85c<br \/>\n \ub514\uc790\uc778\ud569\ub2c8\ub2e4, <span className=\"text-white\">ILLUSION<\/span>\n <\/h1>\n <p className=\"text-lg md:text-xl text-gray-200 max-w-2xl mx-auto mb-10 drop-shadow-lg font-light\">\n \ub2e8\uc21c\ud55c \uc778\ud14c\ub9ac\uc5b4\ub098 \ud31d\uc5c5\uc2a4\ud1a0\uc5b4\ub97c \ub118\uc5b4\uc12d\ub2c8\ub2e4.<br \/>\n \ubc14\ub2e5, \ubcbd, \ucc9c\uc7a5\uc774 \ube0c\ub79c\ub4dc\uc758 \uc2a4\ud1a0\ub9ac\ub85c \ubcc0\ud558\ub294 <b>\ucd08\ubab0\uc785\ud615 \ubbf8\ub514\uc5b4 \uacf5\uac04<\/b>\uc744 \uad6c\ucd95\ud574\ub4dc\ub9bd\ub2c8\ub2e4.\n <\/p>\n <div className=\"flex flex-col md:flex-row justify-center gap-4\">\n <button onClick={() => scrollToSection('about')} className=\"px-8 py-4 bg-purple-600\/90 hover:bg-purple-600 backdrop-blur text-white rounded-lg font-bold transition-all flex items-center justify-center gap-2 border border-purple-400\/30\">\n \uc11c\ube44\uc2a4 \uc790\uc138\ud788 \ubcf4\uae30 <ChevronDown size={20} \/>\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"about\" className=\"py-24 bg-zinc-950\">\n <div className=\"container mx-auto px-6\">\n <div className=\"grid md:grid-cols-2 gap-16 items-center\">\n <div className=\"order-2 md:order-1\">\n <h2 className=\"text-3xl md:text-5xl font-bold mb-8 leading-tight\">\n \uc65c <span className=\"text-purple-500\">\ubbf8\ub514\uc5b4 \uacf5\uac04 \ube0c\ub79c\ub529<\/span>\uc778\uac00\uc694?\n <\/h2>\n <p className=\"text-gray-400 text-lg mb-6 leading-relaxed\">\n \uae30\uc874\uc758 \ud31d\uc5c5\uc2a4\ud1a0\uc5b4\ub098 \uc804\uc2dc \uacf5\uac04\uc740 \uc815\uc801\uc778 \uc778\ud14c\ub9ac\uc5b4\uc640 \ub2e8\uc21c\ud55c \uc81c\ud488 \uc9c4\uc5f4\uc5d0 \uadf8\ucce4\uc2b5\ub2c8\ub2e4. \n \uace0\uac1d\uc740 '\uad6c\uacbd'\ub9cc \ud560 \ubfd0, \ube0c\ub79c\ub4dc\uc5d0 '\ubab0\uc785'\ud558\uc9c0 \ubabb\ud588\uc2b5\ub2c8\ub2e4.\n <\/p>\n <div className=\"space-y-6 mt-8\">\n <div className=\"flex gap-4\">\n <div className=\"w-12 h-12 rounded-lg bg-blue-900\/30 flex items-center justify-center text-blue-400 shrink-0 border border-blue-500\/20\"><Maximize \/><\/div>\n <div><h3 className=\"text-xl font-bold mb-2\">\uacf5\uac04\uc758 \ud655\uc7a5 (XR & Media)<\/h3><p className=\"text-gray-400 text-sm\">\ube54\ud504\ub85c\uc81d\ud130, LED Wall, XR \uae30\uc220\uc744 \ud65c\uc6a9\ud574 \ubcbd, \ubc14\ub2e5, \ucc9c\uc7a5\uae4c\uc9c0 \ubaa8\ub4e0 \uba74\uc744 \uc785\uccb4\uc801\uc778 \ub514\uc2a4\ud50c\ub808\uc774\ub85c \uc804\ud658\ud569\ub2c8\ub2e4.<\/p><\/div>\n <\/div>\n <div className=\"flex gap-4\">\n <div className=\"w-12 h-12 rounded-lg bg-purple-900\/30 flex items-center justify-center text-purple-400 shrink-0 border border-purple-500\/20\"><Zap \/><\/div>\n <div><h3 className=\"text-xl font-bold mb-2\">\uc624\uac10\uc744 \uc790\uadf9\ud558\ub294 \uacbd\ud5d8<\/h3><p className=\"text-gray-400 text-sm\">\ub2e8\uc21c \uc2dc\uac01 \uc815\ubcf4\ub97c \ub118\uc5b4, \uc628\ubab8\uc73c\ub85c \ube0c\ub79c\ub4dc\ub97c \uccb4\ud5d8\ud558\uac8c \ud558\uc5ec \uac15\ub825\ud55c \uae30\uc5b5\uacfc \ud32c\ub364\uc744 \ud615\uc131\ud569\ub2c8\ub2e4.<\/p><\/div>\n <\/div>\n <div className=\"flex gap-4\">\n <div className=\"w-12 h-12 rounded-lg bg-pink-900\/30 flex items-center justify-center text-pink-400 shrink-0 border border-pink-500\/20\"><Layers \/><\/div>\n <div><h3 className=\"text-xl font-bold mb-2\">\uc9c0\uc18d \uac00\ub2a5\ud55c \ub79c\ub4dc\ub9c8\ud06c<\/h3><p className=\"text-gray-400 text-sm\">\ucca0\uac70\ub418\ub294 \uc784\uc2dc \ud31d\uc5c5\uc774 \uc544\ub2d9\ub2c8\ub2e4. \uc9c0\uc18d\uc801\uc778 \uc124\uce58 \uacf5\uac04\uacfc \uc778\ud14c\ub9ac\uc5b4\ub97c \ud3ec\ud568\ud558\uc5ec \uae30\uc5c5\uc758 \uc2dc\uadf8\ub2c8\ucc98 \uacf5\uac04\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div className=\"order-1 md:order-2 relative h-[500px] rounded-2xl overflow-hidden group shadow-2xl border border-white\/10\">\n <img src={MEDIA_ASSETS.conceptImage} alt=\"Media Art Concept\" className=\"absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-70 group-hover:opacity-100\" \/>\n <div className=\"absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent\"><\/div>\n <div className=\"absolute bottom-0 left-0 right-0 p-8\">\n <div className=\"w-16 h-16 bg-white\/10 backdrop-blur-md rounded-full flex items-center justify-center mb-4 cursor-pointer hover:bg-purple-600 transition-colors\"><Play className=\"fill-white translate-x-1\" size={24} \/><\/div>\n <p className=\"text-xs text-purple-400 uppercase tracking-widest mb-2 font-bold\">ILLUSION CONCEPT<\/p>\n <h3 className=\"text-2xl font-bold text-white\">\uace0\uac1d\uc774 \uac78\uc5b4 \ub4e4\uc5b4\uac00\ub294 \ube0c\ub79c\ub4dc \ubb34\ube44<\/h3>\n <p className=\"text-gray-400 text-sm mt-2\">\uacf5\uac04 \uc790\uccb4\uac00 \ud558\ub098\uc758 \uac70\ub300\ud55c \uc2a4\ud06c\ub9b0\uc774 \ub429\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"process\" className=\"py-24 bg-black relative\">\n <div className=\"container mx-auto px-6\">\n <div className=\"text-center mb-16\">\n <h2 className=\"text-3xl md:text-4xl font-bold mb-4\">One-Stop Solution<\/h2>\n <p className=\"text-gray-400\">\ucee8\uc124\ud305\ubd80\ud130 \uc124\uce58, \ucf58\ud150\uce20, \ud64d\ubcf4\uae4c\uc9c0 \ud134\ud0a4(Turn-key)\ub85c \uc9c4\ud589\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div className=\"grid md:grid-cols-4 gap-8\">\n {[\n { icon: <Users className=\"w-8 h-8\" \/>, title: \"1. \ubd84\uc11d \ubc0f \ucee8\uc124\ud305\", desc: \"\uae30\uc5c5\uc758 \ubb38\uc81c\uc810, \ube0c\ub79c\ub4dc \ubc29\ud5a5\uc131, \ud0c0\uac9f \uace0\uac1d, \uc124\uce58 \uc7a5\uc18c\uc758 \ub3d9\uc120\uacfc \ud658\uacbd\uc744 \uc815\ubc00 \ubd84\uc11d\ud569\ub2c8\ub2e4.\", modalId: null },\n { icon: <Lightbulb className=\"w-8 h-8\" \/>, title: \"2. \uacf5\uac04 \uae30\ud68d & \ub514\uc790\uc778\", desc: \"\ubbf8\ub514\uc5b4 \uc544\ud2b8 \uae30\uc220(XR, \ub9f5\ud551 \ub4f1)\uc744 \uc811\ubaa9\ud558\uc5ec \ubc14\ub2e5, \ubcbd, \ucc9c\uc7a5\uc744 \uc544\uc6b0\ub974\ub294 \uc785\uccb4\uc801 \uacf5\uac04\uc744 \uc124\uacc4\ud569\ub2c8\ub2e4.\", modalId: 'design', cta: \"\uc81c\uc791 \ud30c\uc774\ud504\ub77c\uc778 \ud655\uc778\" },\n { icon: <Box className=\"w-8 h-8\" \/>, title: \"3. \uc2dc\uacf5 \ubc0f \uc124\uce58\", desc: \"\uc778\ud14c\ub9ac\uc5b4 \uc2dc\uacf5\ubd80\ud130 \ube54\ud504\ub85c\uc81d\ud130, LED, \uc74c\ud5a5 \uc7a5\ube44 \uc124\uce58\uae4c\uc9c0 \uc644\ubcbd\ud55c \ud558\ub4dc\uc6e8\uc5b4 \ud658\uacbd\uc744 \uad6c\ucd95\ud569\ub2c8\ub2e4.\", modalId: 'construction', cta: \"\uc2dc\uacf5 \ud504\ub85c\uc138\uc2a4 \ud655\uc778\" },\n { icon: <MonitorPlay className=\"w-8 h-8\" \/>, title: \"4. \ucf58\ud150\uce20 & \ud64d\ubcf4\", desc: \"\uacf5\uac04\uc5d0 \ucd5c\uc801\ud654\ub41c \uace0\ud004\ub9ac\ud2f0 \uc601\uc0c1 \ucf58\ud150\uce20 \uc81c\uc791 \ubc0f \uc624\ud508 \uc774\ud6c4 \ub9c8\ucf00\ud305\uae4c\uc9c0 \ucc45\uc784\uc9d1\ub2c8\ub2e4.\", modalId: null }\n ].map((step, index) => (\n <div key={index} onClick={() => { if (step.modalId) setActiveModal(step.modalId); }} className={`bg-zinc-900\/50 p-8 rounded-2xl border border-white\/5 transition-all group ${step.modalId ? 'cursor-pointer hover:border-purple-500 hover:bg-zinc-800\/80 relative overflow-hidden' : 'hover:border-purple-500\/50 hover:-translate-y-2'}`}>\n {step.modalId && (<div className=\"absolute top-0 right-0 p-2\"><span className=\"flex h-3 w-3\"><span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75\"><\/span><span className=\"relative inline-flex rounded-full h-3 w-3 bg-purple-500\"><\/span><\/span><\/div>)}\n <div className={`w-16 h-16 bg-zinc-800 rounded-full flex items-center justify-center text-white mb-6 transition-colors ${step.modalId ? 'group-hover:bg-purple-600' : 'group-hover:bg-purple-600'}`}>{step.icon}<\/div>\n <h3 className=\"text-xl font-bold mb-3 flex items-center gap-2\">{step.title}{step.modalId && <ArrowRight size={16} className=\"text-purple-400 opacity-0 group-hover:opacity-100 transition-opacity\" \/>}<\/h3>\n <p className=\"text-gray-400 text-sm leading-relaxed mb-4\">{step.desc}<\/p>\n {step.modalId && (<div className=\"text-xs font-bold text-purple-400 mt-2 flex items-center gap-1 group-hover:translate-x-1 transition-transform\"><Zap size={12} \/> {step.cta}<\/div>)}\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n\n {activeModal && (\n <div className=\"fixed inset-0 z-[100] flex items-center justify-center p-4\">\n <div className=\"absolute inset-0 bg-black\/80 backdrop-blur-sm\" onClick={closeModal}><\/div>\n <div className=\"relative bg-zinc-900 border border-purple-500\/30 w-full max-w-5xl rounded-2xl overflow-hidden shadow-2xl flex flex-col max-h-[90vh]\">\n {activeModal === 'design' && (\n <>\n <div className=\"p-6 border-b border-white\/10 flex justify-between items-center bg-black\/50\">\n <div><h3 className=\"text-2xl font-bold flex items-center gap-2\"><Layers className=\"text-purple-500\" \/>ILLUSION Design Pipeline<\/h3><p className=\"text-gray-400 text-sm mt-1\">\uace0\uac1d\uc758 \uc0c1\uc0c1\uc744 \ud604\uc2e4\ub85c \ub9cc\ub4dc\ub294 \uc77c\ub8e8\uc83c\ub9cc\uc758 \ub514\uc790\uc778 \uacf5\uc815\uc785\ub2c8\ub2e4.<\/p><\/div>\n <button onClick={closeModal} className=\"p-2 hover:bg-white\/10 rounded-full transition-colors\"><X \/><\/button>\n <\/div>\n <div className=\"p-6 md:p-10 overflow-y-auto custom-scrollbar\">\n <div className=\"mb-12\">\n <div className=\"flex items-center gap-3 mb-6\">\n <div className=\"p-3 bg-blue-900\/30 rounded-lg text-blue-400 border border-blue-500\/30\"><Gamepad2 size={24} \/><\/div>\n <div><h4 className=\"text-xl font-bold text-white\">1. XR \uc778\ud130\ub799\ud2f0\ube0c \uac8c\uc784\/\ucf58\ud150\uce20<\/h4><p className=\"text-sm text-gray-400\">Unity\/Unreal Engine\uc744 \ud65c\uc6a9\ud55c \uc2e4\uc2dc\uac04 \ubc18\uc751\ud615 \uacf5\uac04 \uad6c\ucd95<\/p><\/div>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-5 gap-4 relative\">\n <div className=\"hidden md:block absolute top-1\/2 left-0 w-full h-0.5 bg-zinc-800 -z-10 -translate-y-1\/2\"><\/div>\n {[{ step: \"01\", title: \"\uae30\ud68d & \ub85c\uc9c1\uc124\uacc4\", icon: <Lightbulb size={20}\/>, desc: \"\uacf5\uac04 \uc13c\uc11c\uc640 \uc0ac\uc6a9\uc790 \ubc18\uc751 \uc2dc\ub098\ub9ac\uc624 \uc124\uacc4\" }, { step: \"02\", title: \"3D \uc5d0\uc14b \uc81c\uc791\", icon: <Box size={20}\/>, desc: \"\ucd5c\uc801\ud654\ub41c 3D \ubaa8\ub378\ub9c1 \ubc0f UI \ub514\uc790\uc778\" }, { step: \"03\", title: \"\uc5d4\uc9c4 \ud504\ub85c\uadf8\ub798\ubc0d\", icon: <Code size={20}\/>, desc: \"Unity\/Unreal \ub0b4 \ubb3c\ub9ac\uc5d4\uc9c4 \ubc0f \uc778\ud130\ub799\uc158 \uad6c\ud604\" }, { step: \"04\", title: \"\uc13c\uc11c \uc5f0\ub3d9\", icon: <Cpu size={20}\/>, desc: \"LiDAR\/\uc801\uc678\uc120 \uc13c\uc11c\uc640 \ucf58\ud150\uce20 \ub3d9\uae30\ud654\" }, { step: \"05\", title: \"\ud14c\uc2a4\ud2b8 & \ucd5c\uc801\ud654\", icon: <Zap size={20}\/>, desc: \"\ud604\uc7a5 \ud504\ub808\uc784 \ub4dc\ub78d \ubc29\uc9c0 \ubc0f \ub514\ubc84\uae45\" }].map((item, idx) => (\n <div key={idx} className=\"bg-zinc-800 p-4 rounded-xl border border-white\/5 flex flex-col items-center text-center relative z-10 hover:border-blue-500 transition-colors\">\n <div className=\"w-8 h-8 rounded-full bg-zinc-900 border border-white\/10 flex items-center justify-center text-xs font-bold text-gray-500 mb-3\">{item.step}<\/div>\n <div className=\"text-blue-400 mb-2\">{item.icon}<\/div>\n <h5 className=\"font-bold text-sm mb-1\">{item.title}<\/h5>\n <p className=\"text-[11px] text-gray-400 leading-tight\">{item.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <div>\n <div className=\"flex items-center gap-3 mb-6\">\n <div className=\"p-3 bg-purple-900\/30 rounded-lg text-purple-400 border border-purple-500\/30\"><Video size={24} \/><\/div>\n <div><h4 className=\"text-xl font-bold text-white\">2. \ud558\uc774\uc5d4\ub4dc \uc2e4\uc0ac \ub514\uc790\uc778 (Media Art)<\/h4><p className=\"text-sm text-gray-400\">Cinema 4D\/After Effects\ub97c \ud65c\uc6a9\ud55c \uc555\ub3c4\uc801\uc778 \uc601\uc0c1\ubbf8<\/p><\/div>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-4 gap-4 relative\">\n <div className=\"hidden md:block absolute top-1\/2 left-0 w-full h-0.5 bg-zinc-800 -z-10 -translate-y-1\/2\"><\/div>\n {[{ step: \"01\", title: \"\uc2a4\ud1a0\ub9ac\ubcf4\ub4dc & \uc2a4\ud0c0\uc77c\ud504\ub808\uc784\", icon: <Palette size={20}\/>, desc: \"\uacf5\uac04\uc758 \ud1a4\uc564\ub9e4\ub108\ub97c \uacb0\uc815\ud558\ub294 \uc544\ud2b8 \ub514\ub809\ud305\" }, { step: \"02\", title: \"3D \ubaa8\uc158 & \uc2dc\ubbac\ub808\uc774\uc158\", icon: <Wind size={20}\/>, desc: \"\uc785\uccb4\uac10 \uc788\ub294 \uc6c0\uc9c1\uc784\uacfc \ubb3c\ub9ac \uc2dc\ubbac\ub808\uc774\uc158\" }, { step: \"03\", title: \"\ud14d\uc2a4\ucc98\ub9c1 & \ub77c\uc774\ud305\", icon: <Lightbulb size={20}\/>, desc: \"\uc2e4\uc0ac \uc218\uc900\uc758 \uc9c8\uac10 \ud45c\ud604 \ubc0f \ube5b \uc124\uacc4\" }, { step: \"04\", title: \"\ub80c\ub354\ub9c1 & \ud569\uc131\", icon: <Layers size={20}\/>, desc: \"8K \uc774\uc0c1\uc758 \uace0\ud574\uc0c1\ub3c4 \ucd9c\ub825 \ubc0f \uc0c9\ubcf4\uc815\" }].map((item, idx) => (\n <div key={idx} className=\"bg-zinc-800 p-4 rounded-xl border border-white\/5 flex flex-col items-center text-center relative z-10 hover:border-purple-500 transition-colors\">\n <div className=\"w-8 h-8 rounded-full bg-zinc-900 border border-white\/10 flex items-center justify-center text-xs font-bold text-gray-500 mb-3\">{item.step}<\/div>\n <div className=\"text-purple-400 mb-2\">{item.icon}<\/div>\n <h5 className=\"font-bold text-sm mb-1\">{item.title}<\/h5>\n <p className=\"text-[11px] text-gray-400 leading-tight\">{item.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/div>\n <\/>\n )}\n {activeModal === 'construction' && (\n <>\n <div className=\"p-6 border-b border-white\/10 flex justify-between items-center bg-black\/50\">\n <div><h3 className=\"text-2xl font-bold flex items-center gap-2\"><Hammer className=\"text-purple-500\" \/>ILLUSION Construction & Tech<\/h3><p className=\"text-gray-400 text-sm mt-1\">\uc790\uccb4 \uc2dc\uacf5\ud300\uc774 \ud558\ub4dc\uc6e8\uc5b4\ubd80\ud130 \uc2dc\uc2a4\ud15c\uae4c\uc9c0 \uc6d0\uc2a4\ud1b1\uc73c\ub85c \uad6c\ucd95\ud569\ub2c8\ub2e4.<\/p><\/div>\n <button onClick={closeModal} className=\"p-2 hover:bg-white\/10 rounded-full transition-colors\"><X \/><\/button>\n <\/div>\n <div className=\"p-6 md:p-10 overflow-y-auto custom-scrollbar\">\n <h4 className=\"text-xl font-bold text-white mb-6 flex items-center gap-2\"><Box size={20} className=\"text-purple-400\"\/> \uacf5\uac04 \uc720\ud615\ubcc4 \uc2dc\uacf5 \uc194\ub8e8\uc158<\/h4>\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6 mb-16\">\n <div className=\"bg-zinc-800\/50 rounded-2xl border border-white\/10 overflow-hidden hover:border-purple-500\/50 transition-all group\">\n <div className=\"h-48 overflow-hidden relative\">\n <img src={MEDIA_ASSETS.construction_popup} alt=\"Popup Store Construction\" className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80 group-hover:opacity-100\" \/>\n <div className=\"absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent\"><\/div>\n <div className=\"absolute bottom-4 left-4 flex items-center gap-2 text-purple-400 font-bold text-lg\"><Tent size={24} \/> \uc77c\uc2dc\uc801 \ud31d\uc5c5\uc2a4\ud1a0\uc5b4<\/div>\n <\/div>\n <div className=\"p-6 pt-4\"><div className=\"flex flex-col space-y-2 text-sm text-gray-300\"><div className=\"flex gap-2\"><span className=\"text-purple-500 font-bold\">\u2022<\/span><span><strong>\uae30\uac04:<\/strong> 1\uc8fc ~ 3\uac1c\uc6d4 \ub2e8\uae30 \uc6b4\uc601<\/span><\/div><div className=\"flex gap-2\"><span className=\"text-purple-500 font-bold\">\u2022<\/span><span><strong>\ud2b9\uc9d5:<\/strong> \ubaa8\ub4c8\ud615 \ud2b8\ub7ec\uc2a4 \uad6c\uc870, \ub80c\ud0c8 \uc7a5\ube44 \uc138\ud305<\/span><\/div><div className=\"flex gap-2\"><span className=\"text-purple-500 font-bold\">\u2022<\/span><span>\ucca0\uac70 \ubc0f \uc6d0\uc0c1\ubcf5\uad6c\uac00 \uc6a9\uc774\ud55c \uc124\uacc4<\/span><\/div><\/div><\/div>\n <\/div>\n <div className=\"bg-zinc-800\/50 rounded-2xl border border-white\/10 overflow-hidden hover:border-blue-500\/50 transition-all group\">\n <div className=\"h-48 overflow-hidden relative\">\n <img src={MEDIA_ASSETS.construction_signature} alt=\"Signature Space\" className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80 group-hover:opacity-100\" \/>\n <div className=\"absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent\"><\/div>\n <div className=\"absolute bottom-4 left-4 flex items-center gap-2 text-blue-400 font-bold text-lg\"><Box size={24} \/> \uc2dc\uadf8\ub2c8\ucc98 \uacf5\uac04 (\uc0c1\uc124)<\/div>\n <\/div>\n <div className=\"p-6 pt-4\"><div className=\"flex flex-col space-y-2 text-sm text-gray-300\"><div className=\"flex gap-2\"><span className=\"text-blue-500 font-bold\">\u2022<\/span><span><strong>\ub300\uc0c1:<\/strong> \uae30\uc5c5 \ub85c\ube44, \ud64d\ubcf4\uad00, \ud50c\ub798\uadf8\uc2ed \uc2a4\ud1a0\uc5b4<\/span><\/div><div className=\"flex gap-2\"><span className=\"text-blue-500 font-bold\">\u2022<\/span><span><strong>\ud2b9\uc9d5:<\/strong> \uc778\ud14c\ub9ac\uc5b4 \uc77c\uccb4\ud615 \ub9e4\ub9bd \ub9c8\uac10<\/span><\/div><div className=\"flex gap-2\"><span className=\"text-blue-500 font-bold\">\u2022<\/span><span>\uc7a5\uae30 \uc6b4\uc601\uc744 \uc704\ud55c \ub0b4\uad6c\uc131 & \ucfe8\ub9c1 \uc2dc\uc2a4\ud15c<\/span><\/div><\/div><\/div>\n <\/div>\n <div className=\"bg-zinc-800\/50 rounded-2xl border border-white\/10 overflow-hidden hover:border-pink-500\/50 transition-all group\">\n <div className=\"h-48 overflow-hidden relative\">\n <img src={MEDIA_ASSETS.construction_mediaRoom} alt=\"Immersive Media Room\" className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80 group-hover:opacity-100\" \/>\n <div className=\"absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent\"><\/div>\n <div className=\"absolute bottom-4 left-4 flex items-center gap-2 text-pink-400 font-bold text-lg\"><Maximize size={24} \/> \uc2e4\ub0b4 \ubbf8\ub514\uc5b4\ub8f8<\/div>\n <\/div>\n <div className=\"p-6 pt-4\"><div className=\"flex flex-col space-y-2 text-sm text-gray-300\"><div className=\"flex gap-2\"><span className=\"text-pink-500 font-bold\">\u2022<\/span><span><strong>\uad6c\uc131:<\/strong> 6\uba74(\ubcbd+\ubc14\ub2e5+\ucc9c\uc7a5) \ub9f5\ud551<\/span><\/div><div className=\"flex gap-2\"><span className=\"text-pink-500 font-bold\">\u2022<\/span><span><strong>\ud2b9\uc9d5:<\/strong> \ucd08\uace0\ud654\uc9c8 \ud504\ub85c\uc81d\uc158 & LED Wall<\/span><\/div><div className=\"flex gap-2\"><span className=\"text-pink-500 font-bold\">\u2022<\/span><span>\uc644\ubcbd\ud55c \ubab0\uc785\uc744 \uc704\ud55c \uc554\ub9c9\/\ubc29\uc74c \uc2dc\uacf5<\/span><\/div><\/div><\/div>\n <\/div>\n <\/div>\n <div className=\"mb-6\">\n <div className=\"flex items-center gap-3 mb-6\">\n <div className=\"p-3 bg-teal-900\/30 rounded-lg text-teal-400 border border-teal-500\/30\"><Wrench size={24} \/><\/div>\n <div><h4 className=\"text-xl font-bold text-white\">Tech & Install Pipeline<\/h4><p className=\"text-sm text-gray-400\">\ud558\ub4dc\uc6e8\uc5b4 \uc120\uc815\ubd80\ud130 \uc2dc\uc2a4\ud15c \uc548\uc815\ud654\uae4c\uc9c0\uc758 \uc815\ubc00 \uacf5\uc815<\/p><\/div>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-5 gap-4 relative\">\n <div className=\"hidden md:block absolute top-1\/2 left-0 w-full h-0.5 bg-zinc-800 -z-10 -translate-y-1\/2\"><\/div>\n {[{ step: \"01\", title: \"H\/W \uc124\uacc4 & \uc2dc\ubbac\ub808\uc774\uc158\", icon: <Cpu size={20}\/>, desc: \"\uacf5\uac04 \uc870\ub3c4\/\uac70\ub9ac\uc5d0 \ub530\ub978 \ud504\ub85c\uc81d\ud130\/LED \uc2a4\ud399 \uc0b0\ucd9c \ubc0f \ubc30\uce58 \uc2dc\ubbac\ub808\uc774\uc158\" }, { step: \"02\", title: \"\uc778\ud14c\ub9ac\uc5b4 & \ud558\ub4dc\uc6e8\uc5b4 \uc2dc\uacf5\", icon: <Hammer size={20}\/>, desc: \"\ube0c\ub77c\ucf13 \uc124\uce58, \ubc30\uc120 \uc791\uc5c5, \uc2a4\ud06c\ub9b0 \ub3c4\uc7a5 \ub4f1 \ubb3c\ub9ac\uc801 \ud658\uacbd \uad6c\ucd95\" }, { step: \"03\", title: \"\uc2dc\uc2a4\ud15c \uc14b\uc5c5\", icon: <Server size={20}\/>, desc: \"\ubbf8\ub514\uc5b4 \uc11c\ubc84 \uad6c\ucd95, \ub124\ud2b8\uc6cc\ud06c \ub9dd \uad6c\uc131, Watchout\/Resolume \uc138\ud305\" }, { step: \"04\", title: \"\ub9f5\ud551 & \uce98\ub9ac\ube0c\ub808\uc774\uc158\", icon: <Grid size={20}\/>, desc: \"\uc5e3\uc9c0 \ube14\ub80c\ub529(Edge Blending), \uc9c0\uc624\uba54\ud2b8\ub9ac \ubcf4\uc815\uc73c\ub85c \ud654\uba74 \uc65c\uace1 \uc81c\uac70\" }, { step: \"05\", title: \"QC & \uc720\uc9c0\ubcf4\uc218\", icon: <ShieldCheck size={20}\/>, desc: \"\ucd5c\uc885 \ub9ac\ud5c8\uc124, \uc2dc\uc2a4\ud15c \uc548\uc815\ud654 \ud14c\uc2a4\ud2b8 \ubc0f \uc6d0\uaca9 \uc81c\uc5b4 \uc2dc\uc2a4\ud15c \uad50\uc721\" }].map((item, idx) => (\n <div key={idx} className=\"bg-zinc-800 p-4 rounded-xl border border-white\/5 flex flex-col items-center text-center relative z-10 hover:border-teal-500 transition-colors\">\n <div className=\"w-8 h-8 rounded-full bg-zinc-900 border border-white\/10 flex items-center justify-center text-xs font-bold text-gray-500 mb-3\">{item.step}<\/div>\n <div className=\"text-teal-400 mb-2\">{item.icon}<\/div>\n <h5 className=\"font-bold text-sm mb-1\">{item.title}<\/h5>\n <p className=\"text-[11px] text-gray-400 leading-tight\">{item.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <div className=\"mt-8 p-4 bg-zinc-800\/30 rounded-xl border border-white\/10 flex items-center gap-4\">\n <div className=\"p-2 bg-teal-500\/20 rounded-full text-teal-400\"><Cable size={20} \/><\/div>\n <p className=\"text-xs text-gray-400\"><strong className=\"text-white\">Why Illusion?<\/strong> \uc77c\ub8e8\uc83c\uc740 \uc678\uc8fc \uc2dc\uacf5\uc744 \ub9e1\uae30\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \ub514\ud150\uce20 \uc81c\uc791\uc790\uac00 \uc758\ub3c4\ud55c \uc0c9\uac10\uacfc \ub514\ud14c\uc77c\uc744 100% \uad6c\ud604\ud558\uae30 \uc704\ud574 <span className=\"text-teal-400\">\uc790\uccb4 \ud14c\ud06c\ud300\uc774 \uc9c1\uc811 \ub9f5\ud551\ud558\uace0 \ud29c\ub2dd<\/span>\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/>\n )}\n <\/div>\n <\/div>\n )}\n\n <section id=\"case-study\" className=\"py-24 bg-zinc-950 border-t border-white\/10\">\n <div className=\"container mx-auto px-6\">\n <div className=\"flex flex-col md:flex-row gap-12\">\n <div className=\"md:w-1\/2\">\n <div className=\"sticky top-32\">\n <div className=\"inline-block px-3 py-1 bg-blue-900\/30 text-blue-400 rounded-full text-xs font-bold mb-4\">CASE STUDY 01<\/div>\n <h2 className=\"text-3xl md:text-5xl font-bold mb-6\">\uc8fc\ub958 \uae30\uc5c5 A\uc0ac\uc758<br \/><span className=\"text-blue-500\">\uc9c0\ud558 \uacf5\uac04 \ud601\uc2e0 \ud504\ub85c\uc81d\ud2b8<\/span><\/h2>\n <p className=\"text-gray-400 text-lg mb-8\">\"\uc9c0\ud558\ub77c\ub294 \ud3d0\uc1c4\uc801\uc778 \uacf5\uac04\uc744 \uace0\uac1d\ub4e4\uc774 \ucc3e\uc544\uc624\uace0 \uc2f6\uc740 \ud799\ud55c \ubbf8\ub514\uc5b4 \ub77c\uc6b4\uc9c0\ub85c \ubcc0\uc2e0\uc2dc\ud0ac \uc218 \uc788\uc744\uae4c?\"<\/p>\n <div className=\"bg-zinc-900 p-6 rounded-xl border-l-4 border-blue-500 mb-6\"><h4 className=\"font-bold text-white mb-2\">Before<\/h4><p className=\"text-gray-400 text-sm\">\ud3ec\uc2a4\ud130 \uba87 \uc7a5\uacfc \uc2dc\uc74c\ub300\ub9cc \ub193\uc778 \ud3c9\ubc94\ud55c \uacf5\uac04. \ub0ae\uc740 \uc811\uadfc\uc131\uacfc \uc5b4\ub450\uc6b4 \uc870\uba85\uc73c\ub85c \uace0\uac1d \uccb4\ub958 \uc2dc\uac04 10\ubd84 \ubbf8\ub9cc.<\/p><\/div>\n <div className=\"bg-zinc-900 p-6 rounded-xl border-l-4 border-purple-500\"><h4 className=\"font-bold text-white mb-2\">After (Media Space Branding)<\/h4><p className=\"text-gray-400 text-sm\">4\uba74 \ud30c\ub178\ub77c\ub9c8 \ub514\uc2a4\ud50c\ub808\uc774\ub85c \uc591\uc870\uc7a5\uc758 \ud604\uc7a5\uac10\uc744 \uc7ac\ud604. SNS \ubc14\uc774\ub7f4 \uc131\uacf5\uc73c\ub85c \uc6e8\uc774\ud305 \ubc1c\uc0dd \uba85\uc18c\ub85c \ub4f1\uadf9.<\/p><\/div>\n <\/div>\n <\/div>\n <div className=\"md:w-1\/2 flex flex-col gap-6\">\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden\">\n <div className=\"h-48 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_alcohol_1} alt=\"Site Analysis\" className=\"w-full h-full object-cover hover:scale-105 transition-transform duration-500\" \/><div className=\"absolute top-2 left-2 bg-black\/70 px-2 py-1 text-[10px] text-white rounded\">Step 1<\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 flex items-center gap-2\">\uacf5\uac04 \ubd84\uc11d \ubc0f \uc804\ub7b5<\/h3><p className=\"text-gray-400 text-sm\">\uc9c0\ud558\uc758 '\uc5b4\ub460'\uc744 \ubbf8\ub514\uc5b4 \uc544\ud2b8\uc758 '\uce94\ubc84\uc2a4'\ub85c \uc5ed\uc774\uc6a9. \uc678\ubd80 \ube5b \ucc28\ub2e8\uc744 \uc7a5\uc810\uc73c\ub85c \uc2b9\ud654\ud558\uc5ec \ud504\ub85c\uc81d\uc158 \ub9f5\ud551 \ucd5c\uc801\ud654.<\/p>\n <\/div>\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden\">\n <div className=\"h-48 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_alcohol_2} alt=\"Design Simulation\" className=\"w-full h-full object-cover hover:scale-105 transition-transform duration-500\" \/><div className=\"absolute top-2 left-2 bg-black\/70 px-2 py-1 text-[10px] text-white rounded\">Step 2<\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 flex items-center gap-2\">\ubab0\uc785\ud615 \ucf58\ud150\uce20<\/h3><p className=\"text-gray-400 text-sm\">\ubc14\ub2e5\uc5d0\ub294 \ud0c4\uc0b0 \uae30\ud3ec \uc601\uc0c1, \ubcbd\uba74\uc5d0\ub294 \ube0c\ub79c\ub4dc \uc2a4\ud1a0\ub9ac \ud30c\ub178\ub77c\ub9c8. \ud130\uce58 \uc2dc \ubc18\uc751\ud558\ub294 \uc778\ud130\ub799\ud2f0\ube0c \uc694\uc18c\ub85c \uccb4\ud5d8 \uadf9\ub300\ud654.<\/p>\n <\/div>\n <div className=\"bg-zinc-900\/80 p-8 rounded-2xl border border-white\/5 border-l-4 border-purple-600\"><h3 className=\"text-xl font-bold mb-4 flex items-center gap-2\"><span className=\"text-purple-400\">RESULT.<\/span> \uc131\uacfc<\/h3><p className=\"text-gray-300 text-sm\">\"\uc0ac\uc9c4 \ucc0d\uae30 \uc88b\uc740 \uc804\uc2dc \uacf5\uac04\"\uc73c\ub85c \uc785\uc18c\ubb38.<br\/>\ubc29\ubb38\uac1d \uccb4\ub958 \uc2dc\uac04 <span className=\"text-purple-400 font-bold\">300% \uc99d\uac00<\/span>.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section className=\"py-24 bg-black border-t border-white\/10\">\n <div className=\"container mx-auto px-6\">\n <div className=\"flex flex-col md:flex-row gap-12\">\n <div className=\"md:w-1\/2\">\n <div className=\"sticky top-32\">\n <div className=\"inline-block px-3 py-1 bg-pink-900\/30 text-pink-400 rounded-full text-xs font-bold mb-4\">CASE STUDY 02<\/div>\n <h2 className=\"text-3xl md:text-5xl font-bold mb-6\">\ud328\uc158 \uae30\uc5c5 B\uc0ac\uc758<br \/><span className=\"text-pink-500\">\uc548\uacbd \ube0c\ub79c\ub4dc \ub7f0\uce6d \uc1fc\ucf00\uc774\uc2a4<\/span><\/h2>\n <p className=\"text-gray-400 text-lg mb-8\">\"\ub2e8\uc21c\ud55c \uc548\uacbd \ucc29\uc6a9\uc744 \ub118\uc5b4, \ube0c\ub79c\ub4dc\uc758 '\uc138\uacc4\uad00'\uc744 \uc785\ub294 \uacbd\ud5d8\uc744 \uc5b4\ub5bb\uac8c \uc81c\uacf5\ud560 \uac83\uc778\uac00?\"<\/p>\n <div className=\"bg-zinc-900 p-6 rounded-xl border-l-4 border-pink-500\"><h4 className=\"font-bold text-white mb-2\">Concept: Future Vision<\/h4><p className=\"text-gray-400 text-sm\">\uc820\ud2c0\ubaac\uc2a4\ud130\uc640 \uac19\uc740 \uac15\ub82c\ud55c \uc624\ube0c\uc81c\uc640 \uc678\uacc4\uc801\uc778 \ub514\uc790\uc778 \ucee8\uc149. <br\/>\uc548\uacbd\uc744 \uc4f0\ub294 \uc21c\uac04, \uace0\uac1d \uc8fc\ubcc0\uc758 \uacf5\uac04(6\uba74)\uc774 \uc644\uc804\ud788 \uc0c8\ub85c\uc6b4 \ucc28\uc6d0\uc73c\ub85c \ubcc0\uc774\ub418\ub294 \ucd08\ud604\uc2e4 \uacbd\ud5d8 \uc81c\uacf5.<\/p><\/div>\n <div className=\"mt-8 flex flex-wrap gap-2\"><span className=\"px-3 py-1 bg-zinc-800 rounded-full text-xs text-gray-300 border border-white\/10\">#AR_Smart_Mirror<\/span><span className=\"px-3 py-1 bg-zinc-800 rounded-full text-xs text-gray-300 border border-white\/10\">#6_Side_Immersion<\/span><span className=\"px-3 py-1 bg-zinc-800 rounded-full text-xs text-gray-300 border border-white\/10\">#Interactive_Sound<\/span><\/div>\n <\/div>\n <\/div>\n <div className=\"md:w-1\/2 flex flex-col gap-6\">\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden group\">\n <div className=\"h-56 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_eyewear_1} alt=\"AR Kiosk Concept\" className=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" \/><div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/90 to-transparent p-4\"><div className=\"flex items-center gap-2 text-pink-400 font-bold text-sm\"><ScanFace size={16} \/> AR Smart Mirror<\/div><\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 text-white\">AR \ud0a4\uc624\uc2a4\ud06c & 6\uba74 \uc785\uccb4 \ub9f5\ud551<\/h3><p className=\"text-gray-400 text-sm leading-relaxed\">\uc0ac\uc6a9\uc790\uac00 \ud0a4\uc624\uc2a4\ud06c\uc5d0\uc11c \uc548\uacbd\uc744 \uac00\uc0c1 \uc2dc\ucc29(AR)\ud558\ub294 \uc21c\uac04, \ub9e4\uc7a5\uc758 <strong>\ubc14\ub2e5, \ubcbd, \ucc9c\uc7a5 \ub4f1 6\uba74<\/strong>\uc774 \ube0c\ub79c\ub4dc\uc758 \uc678\uacc4 \ud589\uc131 \ucee8\uc149 \uc601\uc0c1\uc73c\ub85c \uc804\ud658\ub429\ub2c8\ub2e4. \uc548\uacbd \uc885\ub958\uc5d0 \ub530\ub77c \ubc30\uacbd\uc774 \ubc14\ub00c\uba70 \uc555\ub3c4\uc801\uc778 \ubab0\uc785\uac10\uc744 \uc120\uc0ac\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden group\">\n <div className=\"h-56 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_eyewear_2} alt=\"Interactive Wall\" className=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" \/><div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/90 to-transparent p-4\"><div className=\"flex items-center gap-2 text-blue-400 font-bold text-sm\"><Zap size={16} \/> Interactive Art<\/div><\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 text-white\">\ubc18\uc751\ud615 \uc0ac\uc6b4\ub4dc & \uc778\ud130\ub799\ud2f0\ube0c \uc6d4<\/h3><p className=\"text-gray-400 text-sm leading-relaxed\">\ub2e8\uc21c\ud55c \uc601\uc0c1 \uc7ac\uc0dd\uc774 \uc544\ub2d9\ub2c8\ub2e4. \uace0\uac1d\uc774 \ubcbd\uba74\uc5d0 \ub2e4\uac00\uac08\uc218\ub85d <strong>\uc785\uccb4 \uc0ac\uc6b4\ub4dc(3D Audio)<\/strong>\uac00 \uc6c5\uc7a5\ud558\uac8c \ubcc0\ud558\uace0, \uc601\uc0c1\uc758 \uadf8\ub798\ud53d \ud328\ud134\uc774 \ubb3c\uacb0\uce58\ub4ef \ubc18\uc751\ud569\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div className=\"bg-zinc-900\/80 p-5 rounded-2xl border border-white\/5\"><h4 className=\"font-bold text-white mb-2 flex items-center gap-2\"><Clock size={16} className=\"text-purple-400\" \/> \ud0c0\uc784 \uc26c\ud504\ud2b8 \ub514\uc2a4\ud50c\ub808\uc774<\/h4><p className=\"text-xs text-gray-400\">\uc2dc\uac04\ub300(\ub0ae\/\ubc24)\uc5d0 \ub530\ub77c \ub9e4\uc7a5\uc758 \uc804\uccb4\uc801\uc778 \uceec\ub7ec \ucee8\uc149\uacfc \uc8fc\ub825 \uc0c1\ud488 \ub514\uc2a4\ud50c\ub808\uc774\uac00 \uc790\ub3d9\uc73c\ub85c \ubcc0\uacbd\ub418\uc5b4, \uc7ac\ubc29\ubb38 \uc2dc\uc5d0\ub3c4 \uc0c8\ub85c\uc6b4 \ub290\ub08c\uc744 \uc90d\ub2c8\ub2e4.<\/p><\/div>\n <div className=\"bg-zinc-900\/80 p-5 rounded-2xl border border-white\/5\"><h4 className=\"font-bold text-white mb-2 flex items-center gap-2\"><Smartphone size={16} className=\"text-purple-400\" \/> \ud64d\ubcf4 \uc5f0\uacc4<\/h4><p className=\"text-xs text-gray-400\">\ud0a4\uc624\uc2a4\ud06c \uccb4\ud5d8 \uc601\uc0c1\uacfc \ub9e4\uc7a5 \ubd84\uc704\uae30\ub97c \ub2f4\uc740 \uc20f\ud3fc \uc601\uc0c1\uc774 \uc790\ub3d9 \uc0dd\uc131\ub418\uc5b4 \uc778\uc2a4\ud0c0\uadf8\ub7a8 \ud64d\ubcf4 \ud398\uc774\uc9c0\uc5d0 \uc989\uc2dc \uc5c5\ub85c\ub4dc\ub429\ub2c8\ub2e4.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section className=\"py-24 bg-zinc-950 border-t border-white\/10\">\n <div className=\"container mx-auto px-6\">\n <div className=\"flex flex-col md:flex-row gap-12\">\n <div className=\"md:w-1\/2\">\n <div className=\"sticky top-32\">\n <div className=\"inline-block px-3 py-1 bg-teal-900\/30 text-teal-400 rounded-full text-xs font-bold mb-4\">CASE STUDY 03<\/div>\n <h2 className=\"text-3xl md:text-5xl font-bold mb-6\">\ub9ac\uc870\ud2b8 C\uc0ac\uc758<br \/><span className=\"text-teal-500\">\ub3c4\uc2ec \uc18d \ud504\ub9ac\ubbf8\uc5c4 \uc1fc\ub8f8<\/span><\/h2>\n <p className=\"text-gray-400 text-lg mb-8\">\"\uba3c \ubc14\ub2f7\uac00\uc5d0 \uc788\ub294 \ub9ac\uc870\ud2b8\uc758 \uac10\ub3d9\uc744, \ub3c4\uc2ec \ud55c\ubcf5\ud310\uc5d0\uc11c \uc644\ubcbd\ud558\uac8c \uccb4\ud5d8\ud558\uac8c \ud560 \uc218 \uc5c6\uc744\uae4c?\"<\/p>\n <div className=\"bg-zinc-900 p-6 rounded-xl border-l-4 border-teal-500\"><h4 className=\"font-bold text-white mb-2\">Concept: The Ocean Here<\/h4><p className=\"text-gray-400 text-sm\">\uc2dc\uacf5\uac04\uc744 \ucd08\uc6d4\ud55c \ub9ac\uc870\ud2b8 \uacbd\ud5d8. 120\ud3c9 \uaddc\ubaa8\uc758 \ub300\ud615 \uacf5\uac04 \uc804\uccb4\ub97c \ubbf8\ub514\uc5b4\uc640 \ubb3c\ub9ac\uc801 \uc7a5\uce58(\ucee4\ud2bc, \ubc14\ub78c)\ub85c \uac10\uc2f8, \uc2e4\uc81c \ubc14\ub2f7\uac00 \ub9ac\uc870\ud2b8 \uac1d\uc2e4\uc5d0 \uc788\ub294 \ub4ef\ud55c 4D \uacbd\ud5d8\uc744 \uc81c\uacf5.<\/p><\/div>\n <div className=\"mt-8 flex flex-wrap gap-2\"><span className=\"px-3 py-1 bg-zinc-800 rounded-full text-xs text-gray-300 border border-white\/10\">#120\ud3c9_CurtainWall_View<\/span><span className=\"px-3 py-1 bg-zinc-800 rounded-full text-xs text-gray-300 border border-white\/10\">#Media_Dining<\/span><span className=\"px-3 py-1 bg-zinc-800 rounded-full text-xs text-gray-300 border border-white\/10\">#Wind_Effect<\/span><\/div>\n <\/div>\n <\/div>\n <div className=\"md:w-1\/2 flex flex-col gap-6\">\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden group\">\n <div className=\"h-56 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_resort_1} alt=\"Ocean View\" className=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" \/><div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/90 to-transparent p-4\"><div className=\"flex items-center gap-2 text-teal-400 font-bold text-sm\"><Waves size={16} \/> 120\ud3c9 \uc624\uc158\ubdf0 & \uc2a4\ud30c<\/div><\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 text-white\">\uc555\ub3c4\uc801\uc778 \ub300\ud615 \ucee4\ud2bc\uc6d4 \ubdf0<\/h3><p className=\"text-gray-400 text-sm leading-relaxed\">\ubcbd\uba74 \uc804\uccb4\ub97c \uac10\uc2f8\ub294 \ucd08\ub300\ud615 \ubbf8\ub514\uc5b4\uc6d4\uc774 120\ud3c9 \ub9ac\uc870\ud2b8\uc758 \ud0c1 \ud2b8\uc778 \ubc14\ub2e4 \uc804\ub9dd\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4. \uc2a4\ud30c \uc2dc\uc124 \uccb4\ud5d8\uc874\uc5d0\uc11c\ub294 \ubb3c\uacb0\uc758 \ubc18\uc9dd\uc784\uacfc \ud30c\ub3c4 \uc18c\ub9ac\uac00 \uc5b4\uc6b0\ub7ec\uc838 \uc2e4\uc81c \ud734\uc591\uc9c0\uc5d0 \uc628 \ub4ef\ud55c \ucc29\uac01\uc744 \ubd88\ub7ec\uc77c\uc73c\ud0b5\ub2c8\ub2e4.<\/p>\n <\/div>\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden group\">\n <div className=\"h-56 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_resort_2} alt=\"Night Dining\" className=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" \/><div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/90 to-transparent p-4\"><div className=\"flex items-center gap-2 text-amber-400 font-bold text-sm\"><Wine size={16} \/> \ubbf8\ub514\uc5b4 \ub2e4\uc774\ub2dd & \uc7ac\uc988<\/div><\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 text-white\">\ubc24\ubc14\ub2e4\uc758 \ub0ad\ub9cc, \ubbf8\ub514\uc5b4 \ub2e4\uc774\ub2dd<\/h3><p className=\"text-gray-400 text-sm leading-relaxed\">\uc870\uba85\uc774 \uc5b4\ub450\uc6cc\uc9c0\uba74 \uacf5\uac04\uc740 \uace0\uae09 \ub2e4\uc774\ub2dd \ubc14\ub85c \ubcc0\ud569\ub2c8\ub2e4. \uc794\uc794\ud55c \uc7ac\uc988 \uc74c\uc545\uacfc \ud568\uaed8, \uc800 \uba40\ub9ac \uc218\ud3c9\uc120\uc5d0\uc11c \uc544\ub978\uac70\ub9ac\ub294 <strong>\uc624\uc9d5\uc5b4\uc7a1\uc774 \ubc30\uc758 \ubd88\ube5b<\/strong>\uc774 \ubbf8\ub514\uc5b4\uc544\ud2b8\ub85c \uc5f0\ucd9c\ub418\uc5b4 \uac10\uc131\uc801\uc778 \uc800\ub141 \uc2dd\uc0ac\ub97c \uc644\uc131\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div className=\"bg-zinc-900\/80 p-6 rounded-2xl border border-white\/5 overflow-hidden group\">\n <div className=\"h-40 rounded-lg bg-zinc-800 mb-6 overflow-hidden relative\"><img src={MEDIA_ASSETS.caseStudy_resort_3} alt=\"Wind Effect\" className=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" \/><div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black\/90 to-transparent p-4\"><div className=\"flex items-center gap-2 text-gray-300 font-bold text-sm\"><Wind size={16} \/> Synesthesia Effect<\/div><\/div><\/div>\n <h3 className=\"text-xl font-bold mb-2 text-white flex items-center gap-2\">\uc624\uac10\uc744 \uae68\uc6b0\ub294 \ub514\ud14c\uc77c<\/h3><p className=\"text-gray-400 text-sm leading-relaxed\">\ub2e8\uc21c\ud55c \uc601\uc0c1 \uc2dc\uccad\uc774 \uc544\ub2d9\ub2c8\ub2e4. \uc800\ub141 \ubc14\ub2f7\ubc14\ub78c\uc5d0 \ud769\ub0a0\ub9ac\ub294 <strong>\uc2e4\uc81c \ucee4\ud2bc<\/strong>\uacfc <strong>\uc1a1\ud48d \uc7a5\uce58(Wind Effect)<\/strong>\ub97c \ud1b5\ud574 \uc0b4\ub791\uc774\ub294 \ubc14\ub78c\uc744 \uc2e4\uc81c\ub85c \ub290\ub07c\uac8c \ud558\uc5ec \ubab0\uc785\uac10\uc744 \uadf9\ub300\ud654\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"contact\" className=\"py-24 bg-gradient-to-t from-purple-900\/20 to-black text-center\">\n <div className=\"container mx-auto px-6\">\n <h2 className=\"text-3xl md:text-5xl font-bold mb-6\">\uadc0\uc0ac\uc758 \uacf5\uac04\ub3c4 <br\/><span className=\"text-purple-500\">\ud601\uc2e0\uc801\uc778 \ube0c\ub79c\ub4dc \uacbd\ud5d8<\/span>\uc774 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/h2>\n <p className=\"text-gray-400 mb-10 max-w-xl mx-auto\">\ub9c9\uc5f0\ud55c \uc544\uc774\ub514\uc5b4\ub9cc \uc788\uc5b4\ub3c4 \uad1c\ucc2e\uc2b5\ub2c8\ub2e4. <br\/>\uc77c\ub8e8\uc83c(ILLUSION)\uc774 \ud574\ub2f5\uc744 \uc81c\uc2dc\ud574 \ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n <div className=\"max-w-md mx-auto bg-zinc-900 p-8 rounded-2xl border border-white\/10 text-left mb-16\">\n <form className=\"space-y-4\" onSubmit={handleCF7Submit}>\n <div>\n <label className=\"block text-xs font-bold text-gray-500 mb-1\">\ud68c\uc0ac\uba85 \/ \ub2f4\ub2f9\uc790<\/label>\n <input type=\"text\" name=\"company\" value={formData.company} onChange={handleInputChange} className=\"w-full bg-zinc-800 border border-zinc-700 rounded p-3 text-white focus:outline-none focus:border-purple-500 transition-colors\" placeholder=\"\uc608) \ubbf8\ub514\uc5b4\uc8fc\uc2dd\ud68c\uc0ac \/ \ud64d\uae38\ub3d9\" required disabled={submitStatus === 'submitting'} \/>\n <\/div>\n <div>\n <label className=\"block text-xs font-bold text-gray-500 mb-1\">\uc5f0\ub77d\ucc98<\/label>\n <input type=\"text\" name=\"contact\" value={formData.contact} onChange={handleInputChange} className=\"w-full bg-zinc-800 border border-zinc-700 rounded p-3 text-white focus:outline-none focus:border-purple-500 transition-colors\" placeholder=\"010-0000-0000\" required disabled={submitStatus === 'submitting'} \/>\n <\/div>\n <div>\n <label className=\"block text-xs font-bold text-gray-500 mb-1\">\ubb38\uc758 \ub0b4\uc6a9<\/label>\n <textarea name=\"message\" value={formData.message} onChange={handleInputChange} className=\"w-full bg-zinc-800 border border-zinc-700 rounded p-3 text-white focus:outline-none focus:border-purple-500 h-24 transition-colors\" placeholder=\"\ub300\ub7b5\uc801\uc778 \ud3c9\uc218, \uc5c5\uc885, \uace0\ubbfc\uc0ac\ud56d\uc744 \uc801\uc5b4\uc8fc\uc138\uc694.\" required disabled={submitStatus === 'submitting'}><\/textarea>\n <\/div>\n <button type=\"submit\" className={`w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 rounded-lg transition-all flex items-center justify-center gap-2 shadow-lg shadow-purple-900\/20 ${submitStatus === 'submitting' ? 'opacity-70 cursor-wait' : ''}`} disabled={submitStatus === 'submitting'}>\n {submitStatus === 'submitting' ? (\n <><Loader className=\"animate-spin\" size={20} \/> \uc804\uc1a1 \uc911...<\/>\n ) : (\n <>\ubb34\ub8cc \ucee8\uc124\ud305 \uc2e0\uccad\ud558\uae30 <ArrowRight size={18} \/><\/>\n )}\n <\/button>\n <\/form>\n <\/div>\n \n <div className=\"border-t border-white\/10 pt-12 pb-6\">\n <div className=\"flex flex-col items-center justify-center text-zinc-500 text-xs space-y-2\">\n <div className=\"flex items-center gap-2 mb-2\">\n\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<figure class=\"wp-block-jetpack-image-compare\"><div class=\"juxtapose\" data-mode=\"horizontal\"><img class=\"image-compare__image-before\"\/><img class=\"image-compare__image-after\"\/><\/div><\/figure>\n\n\n\n<div class=\"wp-block-cover is-light\"><video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"https:\/\/illusion.place\/wp-content\/uploads\/2024\/11\/forest2.mp4\" data-object-fit=\"cover\"><\/video><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-white-color has-text-color has-link-color wp-elements-2bcec1c99cf43a755680e5482423b850\" style=\"font-size:25px\">\uc0c8\ub85c\uc6b4 \ubab0\uc785\ud615 \uacf5\uac04\uc758 \uacbd\ud5d8.<\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>ILLUSION – Media Space Branding<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"footnotes":""},"class_list":["post-1594","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/pages\/1594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/illusion.place\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1594"}],"version-history":[{"count":68,"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/pages\/1594\/revisions"}],"predecessor-version":[{"id":2688,"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/pages\/1594\/revisions\/2688"}],"wp:attachment":[{"href":"https:\/\/illusion.place\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}