Electro Demo \u2014 Main<\/title>\n<meta name=\"robots\" content=\"noindex,nofollow\" \/>\n<style>\n :root{\n \/* \uae30\ubcf8(\uc2a4\ud0a8 \ub85c\ub529 \uc804) \ud1a0\ud070 *\/\n --bg:#ffffff; --text:#0b0d10; --muted:#666b74; --line:#e7e9ee;\n --brand:#0b57d0; --accent:#0ea5e9; --hero:#f6f8fb;\n --radius:18px; --max:1280px;\n }\n *{box-sizing:border-box}\n html,body{margin:0;background:var(--bg);color:var(--text);font:16px\/1.6 \"Noto Sans KR\", system-ui, -apple-system, Segoe UI, Roboto, \"Apple SD Gothic Neo\", \"Malgun Gothic\", sans-serif}\n img{max-width:100%;display:block}\n a{color:inherit;text-decoration:none}\n button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}\n .container{max-width:var(--max);margin:0 auto;padding:0 20px}\n\n \/* Skip to content *\/\n .skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}\n .skip:focus{position:fixed;left:20px;top:20px;background:#000;color:#fff;padding:10px 14px;border-radius:10px;z-index:9999}\n\n \/* Header *\/\n header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}\n .hd{display:flex;align-items:center;height:64px;gap:16px}\n .logo{display:flex;align-items:center;gap:10px}\n .logoMark{width:28px;height:28px;border-radius:8px;background:var(--brand);\n box-shadow:0 6px 18px rgba(0,0,0,.15) inset, 0 2px 8px rgba(0,0,0,.05)}\n .logoTxt{font-weight:800;letter-spacing:.2px}\n nav{margin-left:auto}\n .nav{display:flex;gap:18px}\n .nav a{padding:8px 10px;border-radius:10px}\n .nav a:hover{background:#f5f6f8}\n .skin{margin-left:10px;border:1px solid var(--line);padding:6px 10px;border-radius:10px;background:#fff}\n\n \/* Hero *\/\n .hero{margin:18px 0}\n .carousel{position:relative;overflow:hidden;border-radius:24px}\n .slides{display:flex;transition:transform .6s ease}\n .slide{min-width:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:center;padding:46px;background:var(--hero)}\n .slide h1{font-size:clamp(26px,4vw,44px);line-height:1.2;margin:0 0 10px}\n .slide p{color:var(--muted);margin:0 0 18px}\n .btn{display:inline-block;padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:#fff}\n .btn.primary{background:var(--brand);color:#fff;border-color:transparent}\n .art{border-radius:18px;overflow:hidden;aspect-ratio:4\/3;background:#0f172a}\n .art img{width:100%;height:100%;object-fit:cover}\n .ctrl{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 8px}\n .ctrl button{width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.96)}\n .dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px}\n .dot{width:8px;height:8px;border-radius:50%;background:#cfd6e2}\n .dot.active{background:#111}\n\n \/* Tabs + Grid *\/\n .tabs{display:flex;gap:10px;overflow:auto;padding:10px 0;margin:18px 0 10px}\n .tabs button{white-space:nowrap;border:1px solid var(--line);padding:8px 12px;border-radius:999px;background:#fff}\n .tabs button.active{background:#111;color:#fff;border-color:#111}\n .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}\n .card{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;display:flex;flex-direction:column}\n .card .thumb{aspect-ratio:4\/3;background:#eef1f6}\n .card .thumb img{width:100%;height:100%;object-fit:cover}\n .card .body{padding:14px}\n .card h3{margin:0 0 6px;font-size:18px}\n .badge{display:inline-block;background:#111;color:#fff;font-size:12px;padding:4px 8px;border-radius:999px;margin-bottom:8px}\n .price{font-weight:700}\n .card .actions{display:flex;gap:8px;margin-top:auto;padding:14px;border-top:1px solid var(--line)}\n .card .actions .btn{flex:1;text-align:center}\n\n \/* Promo Split *\/\n .promo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0}\n .promo .p{position:relative;border-radius:24px;overflow:hidden;min-height:240px;display:grid;place-items:center}\n .promo .p::before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg, rgba(0,0,0,.15), rgba(0,0,0,.35))}\n .promo .txt{position:relative;color:#fff;text-align:center;padding:20px}\n .promo .bg1{background:url('https:\/\/picsum.photos\/1200\/700?random=211') center\/cover}\n .promo .bg2{background:url('https:\/\/picsum.photos\/1200\/700?random=212') center\/cover}\n\n \/* Stories *\/\n .stories{margin:30px 0}\n .stories h2{margin:0 0 10px}\n .snap{display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:14px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:6px}\n .story{scroll-snap-align:start;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}\n .story .thumb{aspect-ratio:16\/9;background:#eef1f6}\n .story .thumb img{width:100%;height:100%;object-fit:cover}\n .story .body{padding:14px}\n\n \/* Footer *\/\n footer{background:#f6f7f9;border-top:1px solid var(--line);margin-top:40px}\n .ft{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:28px 0}\n .ft h4{margin:6px 0 12px;font-size:14px}\n .ft a{display:block;padding:6px 0;color:#3a3b3f}\n .legal{border-top:1px solid var(--line);padding:14px 0;color:#6b6d71;font-size:13px;text-align:center}\n\n \/* Responsive *\/\n @media (max-width:1024px){\n .slide{grid-template-columns:1fr;gap:18px;padding:30px}\n .grid{grid-template-columns:repeat(2,1fr)}\n .promo{grid-template-columns:1fr}\n .ft{grid-template-columns:repeat(3,1fr)}\n }\n @media (max-width:720px){\n .ft{grid-template-columns:repeat(2,1fr)}\n }\n @media (prefers-reduced-motion:reduce){\n .slides{transition:none}\n }\n<\/style>\n<\/head>\n<body>\n<a href=\"#main\" class=\"skip\">\ubcf8\ubb38 \ubc14\ub85c\uac00\uae30<\/a>\n\n<header>\n <div class=\"container hd\">\n <div class=\"logo\">\n <span class=\"logoMark\" aria-hidden=\"true\"><\/span>\n <span class=\"logoTxt\" id=\"brandName\">Electro Demo<\/span>\n <\/div>\n <nav aria-label=\"\uc8fc\uc694 \uba54\ub274\">\n <div class=\"nav\">\n <a href=\"#\">\ubaa8\ubc14\uc77c<\/a><a href=\"#\">TV\/\uc624\ub514\uc624<\/a><a href=\"#\">\uc8fc\ubc29\uac00\uc804<\/a><a href=\"#\">\ub9ac\ube59\uac00\uc804<\/a><a href=\"#\">PC\/\uc8fc\ubcc0\uae30\uae30<\/a>\n <\/div>\n <\/nav>\n <select class=\"skin\" id=\"skinSelect\" aria-label=\"\ube0c\ub79c\ub4dc \uc2a4\ud0a8 \uc120\ud0dd\"><\/select>\n <\/div>\n<\/header>\n\n<main id=\"main\" class=\"container\">\n \n <section class=\"hero\" aria-label=\"\uc8fc\uc694 \ud504\ub85c\ubaa8\uc158\">\n <div class=\"carousel\" data-carousel>\n <div class=\"slides\" id=\"heroSlides\"><\/div>\n <div class=\"ctrl\" aria-hidden=\"true\">\n <button data-prev aria-label=\"\uc774\uc804 \uc2ac\ub77c\uc774\ub4dc\">\u2039<\/button>\n <button data-next aria-label=\"\ub2e4\uc74c \uc2ac\ub77c\uc774\ub4dc\">\u203a<\/button>\n <\/div>\n <div class=\"dots\" id=\"dots\" role=\"tablist\" aria-label=\"\uc2ac\ub77c\uc774\ub4dc \uc778\ub514\ucf00\uc774\ud130\"><\/div>\n <\/div>\n <\/section>\n\n \n <section aria-label=\"\uce74\ud14c\uace0\ub9ac\">\n <div class=\"tabs\" id=\"tabs\" role=\"tablist\"><\/div>\n <div class=\"grid\" id=\"grid\"><\/div>\n <\/section>\n\n \n <section class=\"promo\" aria-label=\"\ud504\ub85c\ubaa8\uc158\">\n <a class=\"p bg1\" href=\"#\"><div class=\"txt\"><h2 id=\"promo1\">AI \uc2a4\ub9c8\ud2b8 \ubaa8\ub2c8\ud130 \ub7f0\uce6d<\/h2><p>\uc791\uc5c5\u00b7\uc5d4\ud130 \uc62c\uc778\uc6d0<\/p><\/div><\/a>\n <a class=\"p bg2\" href=\"#\"><div class=\"txt\"><h2 id=\"promo2\">\ube44\uc2a4\ud3ec\ud06c \uc815\uc218\uae30 \ucd9c\uc2dc<\/h2><p>\ubbf8\ub2c8\uba40 \ub514\uc790\uc778<\/p><\/div><\/a>\n <\/section>\n\n \n <section class=\"stories\" aria-label=\"\ube0c\ub79c\ub4dc \uc2a4\ud1a0\ub9ac\">\n <h2 id=\"storiesTitle\">\ub2e4\uc591\ud55c \uc2a4\ud1a0\ub9ac<\/h2>\n <div class=\"snap\" id=\"stories\"><\/div>\n <\/section>\n<\/main>\n\n<footer>\n <div class=\"container ft\">\n <div><h4>\uc81c\ud488<\/h4><a href=\"#\">\uc2a4\ub9c8\ud2b8\ud3f0<\/a><a href=\"#\">\ud0dc\ube14\ub9bf<\/a><a href=\"#\">\uc6cc\uce58<\/a><a href=\"#\">\ubc84\uc988<\/a><a href=\"#\">TV<\/a><a href=\"#\">\uac00\uc804<\/a><\/div>\n <div><h4>\uae30\ud68d\uc804\/\ud61c\ud0dd<\/h4><a href=\"#\">\uc804\uccb4 \ubcf4\uae30<\/a><a href=\"#\">\uce74\ub4dc \ud61c\ud0dd<\/a><a href=\"#\">\uc544\uc6b8\ub81b<\/a><\/div>\n <div><h4>\uace0\uac1d\uc11c\ube44\uc2a4<\/h4><a href=\"#\">FAQ<\/a><a href=\"#\">\uc11c\ube44\uc2a4\uc13c\ud130 \ucc3e\uae30<\/a><a href=\"#\">\uc124\uce58\/\ubc30\uc1a1<\/a><\/div>\n <div><h4>\ud68c\uc0ac\uc18c\uac1c<\/h4><a href=\"#\">\uae30\uc5c5\uc815\ubcf4<\/a><a href=\"#\">\ucc44\uc6a9<\/a><a href=\"#\">\ub274\uc2a4\ub8f8<\/a><\/div>\n <div><h4>\uc815\ucc45<\/h4><a href=\"#\">\uc774\uc6a9\uc57d\uad00<\/a><a href=\"#\">\uac1c\uc778\uc815\ubcf4\ucc98\ub9ac\ubc29\uce68<\/a><a href=\"#\">\ucfe0\ud0a4<\/a><\/div>\n <\/div>\n <div class=\"container legal\">\u00a9 2025 Electro Demo \u2014 \ubcf8 \ub370\ubaa8\ub294 CC0 \ub300\uccb4 \uc774\ubbf8\uc9c0\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/div>\n<\/footer>\n\n<script>\n\/* ========= \uc2a4\ud0a8 \uc815\uc758: Blue(\uc0bc\uc131 \ub290\ub08c), Mint(LG \ub290\ub08c) =========\n \uc804\ubd80 CC0(\ubb34\uad8c\ub9ac) \uc774\ubbf8\uc9c0 URL \uc0ac\uc6a9 (picsum.photos) *\/\nconst SKINS = [\n {\n id:'blue',\n name:'Blue (\uc0bc\uc131 \ub290\ub08c)',\n tokens:{ brand:'#0b57d0', accent:'#0ea5e9', bg:'#ffffff', text:'#0b0d10', muted:'#666b74', line:'#e7e9ee', hero:'#f6f8fb' },\n hero:[\n { title:'\uc2e0\uc81c\ud488 \ud50c\ub798\uadf8\uc2ed \u2014 AI\uc758 \uc0c8 \uae30\uc900', desc:'\uace0\uc131\ub2a5 \uce69, \ucd08\uace0\ud574\uc0c1\ub3c4, \uc628\ub514\ubc14\uc774\uc2a4 AI', img:'https:\/\/picsum.photos\/1200\/800?random=1001' },\n { title:'\ud504\ub9ac\ubbf8\uc5c4 TV \u2014 \ud604\uc2e4\uc744 \ub354 \uac00\uae5d\uac8c', desc:'\ud000\ud140 \uceec\ub7ec, AI \uc5c5\uc2a4\ucf00\uc77c\ub9c1', img:'https:\/\/picsum.photos\/1200\/800?random=1002' },\n { title:'\ube44\uc2a4\ud3ec\ud06c \ud0a4\uce5c \u2014 \ub098\ub9cc\uc758 \uc8fc\ubc29', desc:'\ubaa8\ub4c8\ud615 \ub514\uc790\uc778, \uc5d0\ub108\uc9c0 \uc808\uac10', img:'https:\/\/picsum.photos\/1200\/800?random=1003' },\n ],\n tabs:['\uc804\uccb4','\ubaa8\ubc14\uc77c','TV\/\uc624\ub514\uc624','\uc8fc\ubc29\uac00\uc804','\ub9ac\ube59\uac00\uc804','PC\/\uc8fc\ubcc0\uae30\uae30','\uc6e8\uc5b4\ub7ec\ube14'],\n products:[\n { cat:'\ubaa8\ubc14\uc77c', badge:'\uc2e0\uc81c\ud488', title:'\uc2a4\ub9c8\ud2b8\ud3f0 A', desc:'AI \uce74\uba54\ub77c', price:'\u20a91,190,000~', img:'https:\/\/picsum.photos\/800\/600?random=1101' },\n { cat:'TV\/\uc624\ub514\uc624', title:'QLED 4K TV', desc:'AI \uc5c5\uc2a4\ucf00\uc77c\ub9c1', price:'\u20a91,590,000~', img:'https:\/\/picsum.photos\/800\/600?random=1102' },\n { cat:'\uc8fc\ubc29\uac00\uc804', title:'4\ub3c4\uc5b4 \ub0c9\uc7a5\uace0', desc:'\ubaa8\ub4c8\ud615\/\uc808\uc804', price:'\u20a92,290,000~', img:'https:\/\/picsum.photos\/800\/600?random=1103' },\n { cat:'PC\/\uc8fc\ubcc0\uae30\uae30', title:'\uc6b8\ud2b8\ub77c\ubd81', desc:'\ucd08\uacbd\ub7c9\u00b7\uae34 \ubc30\ud130\ub9ac', price:'\u20a91,390,000~', img:'https:\/\/picsum.photos\/800\/600?random=1104' },\n { cat:'\uc6e8\uc5b4\ub7ec\ube14', title:'\uc6cc\uce58', desc:'AI \ud5ec\uc2a4\ucf54\uce6d', price:'\u20a9329,000~', img:'https:\/\/picsum.photos\/800\/600?random=1105' },\n { cat:'\ub9ac\ube59\uac00\uc804', title:'\uacf5\uae30\uccad\uc815\uae30', desc:'\ucd08\ubbf8\uc138\uba3c\uc9c0', price:'\u20a9249,000~', img:'https:\/\/picsum.photos\/800\/600?random=1106' },\n { cat:'\uc8fc\ubc29\uac00\uc804', title:'\uc2dd\uae30\uc138\ucc99\uae30', desc:'\uc800\uc18c\uc74c', price:'\u20a9899,000~', img:'https:\/\/picsum.photos\/800\/600?random=1107' },\n { cat:'TV\/\uc624\ub514\uc624', title:'\uc0ac\uc6b4\ub4dc\ubc14', desc:'\ub3cc\ube44 \uc560\ud2b8\ubaa8\uc2a4', price:'\u20a9399,000~', img:'https:\/\/picsum.photos\/800\/600?random=1108' },\n ],\n storiesTitle:'\ube0c\ub79c\ub4dc \uc2a4\ud1a0\ub9ac',\n stories:[\n { title:'One UI \ud301 \ubaa8\uc74c', desc:'\uc0dd\uc0b0\uc131 \ud5a5\uc0c1', img:'https:\/\/picsum.photos\/1200\/700?random=1201' },\n { title:'\uc2a4\ub9c8\ud2b8\ud648 \uc544\uc774\ub514\uc5b4', desc:'\uc9d1\uc744 \ub354 \ub611\ub611\ud558\uac8c', img:'https:\/\/picsum.photos\/1200\/700?random=1202' },\n { title:'\ube44\ud558\uc778\ub4dc \uc81c\uc791\uae30', desc:'\uc124\uacc4 \uc774\uc57c\uae30', img:'https:\/\/picsum.photos\/1200\/700?random=1203' },\n { title:'\uc9c0\uc18d\uac00\ub2a5\uc131', desc:'\uc21c\ud658 \uc18c\uc7ac', img:'https:\/\/picsum.photos\/1200\/700?random=1204' },\n ]\n },\n {\n id:'mint',\n name:'Mint (LG \ub290\ub08c)',\n tokens:{ brand:'#0ea5a3', accent:'#10b981', bg:'#ffffff', text:'#0b0d10', muted:'#616874', line:'#e6e8ee', hero:'#ecfffb' },\n hero:[\n { title:'Light & Smart', desc:'Battery for days', img:'https:\/\/picsum.photos\/1200\/800?random=2001' },\n { title:'Cinematic TV', desc:'Dolby Vision', img:'https:\/\/picsum.photos\/1200\/800?random=2002' },\n ],\n tabs:['\uc804\uccb4','\ubaa8\ubc14\uc77c','TV\/\uc624\ub514\uc624','\ub9ac\ube59\uac00\uc804','\uc6e8\uc5b4\ub7ec\ube14'],\n products:[\n { cat:'\ubaa8\ubc14\uc77c', badge:'New', title:'Lite Phone', desc:'Feather 160g', price:'\u20a9699,000~', img:'https:\/\/picsum.photos\/800\/600?random=2101' },\n { cat:'TV\/\uc624\ub514\uc624', title:'Soundbar 7.1', desc:'Wireless', price:'\u20a9599,000~', img:'https:\/\/picsum.photos\/800\/600?random=2102' },\n { cat:'\ub9ac\ube59\uac00\uc804', title:'Air Purifier', desc:'PM1.0', price:'\u20a9279,000~', img:'https:\/\/picsum.photos\/800\/600?random=2103' },\n { cat:'\uc6e8\uc5b4\ub7ec\ube14', title:'Watch Fit', desc:'GPS\/HRV', price:'\u20a9229,000~', img:'https:\/\/picsum.photos\/800\/600?random=2104' },\n ],\n storiesTitle:'Inspiration',\n stories:[\n { title:'Design Story', desc:'Material craft', img:'https:\/\/picsum.photos\/1200\/700?random=2201' },\n { title:'Smart Routine', desc:'Automation', img:'https:\/\/picsum.photos\/1200\/700?random=2202' },\n ]\n }\n];\n\n\/* ========= \uc720\ud2f8 ========= *\/\nconst $ = s => document.querySelector(s);\nfunction setTokens(t){\n const r=document.documentElement.style;\n r.setProperty('--brand', t.brand);\n r.setProperty('--accent', t.accent);\n r.setProperty('--bg', t.bg);\n r.setProperty('--text', t.text);\n r.setProperty('--muted', t.muted);\n r.setProperty('--line', t.line);\n r.setProperty('--hero', t.hero);\n document.body.style.background=t.bg;\n document.body.style.color=t.text;\n}\n\n\/* ========= DOM \ucc38\uc870 ========= *\/\nconst nameEl = $('#brandName');\nconst slidesEl = $('#heroSlides');\nconst dotsEl = $('#dots');\nconst tabsEl = $('#tabs');\nconst gridEl = $('#grid');\nconst storiesTitleEl = $('#storiesTitle');\nconst storiesEl = $('#stories');\nconst selectEl = $('#skinSelect');\n\n\/* ========= \ub80c\ub354\ub9c1 ========= *\/\nfunction applySkin(skin){\n setTokens(skin.tokens);\n nameEl.textContent = `Electro Demo \u2014 ${skin.name}`;\n\n \/\/ Hero\n slidesEl.innerHTML='';\n skin.hero.forEach(h=>{\n const el=document.createElement('article');\n el.className='slide';\n el.innerHTML=`\n <div>\n <h1>${h.title}<\/h1>\n <p>${h.desc||''}<\/p>\n <a class=\"btn primary\" href=\"#\">\uc790\uc138\ud788 \ubcf4\uae30<\/a>\n <a class=\"btn\" href=\"#\">\ud61c\ud0dd<\/a>\n <\/div>\n <div class=\"art\"><img decoding=\"async\" alt=\"\" src=\"${h.img}\"><\/div>`;\n slidesEl.appendChild(el);\n });\n initHero();\n\n \/\/ Tabs\n tabsEl.innerHTML='';\n (skin.tabs||['\uc804\uccb4']).forEach((t,i)=>{\n const b=document.createElement('button');\n b.textContent=t; b.dataset.filter=t;\n b.className='tab'+(i===0?' active':'');\n b.addEventListener('click',()=>{\n [...tabsEl.children].forEach(k=>k.classList.remove('active'));\n b.classList.add('active');\n filterGrid(t);\n });\n tabsEl.appendChild(b);\n });\n\n \/\/ Products\n gridEl.innerHTML='';\n (skin.products||[]).forEach(p=>{\n const c=document.createElement('article');\n c.className='card'; c.dataset.cat=p.cat||'\uc804\uccb4';\n c.innerHTML=`\n <div class=\"thumb\"><img decoding=\"async\" alt=\"\" src=\"${p.img}\"><\/div>\n <div class=\"body\">\n ${p.badge?`<span class=\"badge\">${p.badge}<\/span>`:''}\n <h3>${p.title}<\/h3>\n <p class=\"desc\">${p.desc||''}<\/p>\n <div class=\"price\">${p.price||''}<\/div>\n <\/div>\n <div class=\"actions\">\n <a class=\"btn\" href=\"#\">\uc790\uc138\ud788<\/a>\n <a class=\"btn primary\" href=\"#\">\uad6c\ub9e4\ud558\uae30<\/a>\n <\/div>`;\n gridEl.appendChild(c);\n });\n\n \/\/ Stories\n storiesTitleEl.textContent=skin.storiesTitle||'\uc2a4\ud1a0\ub9ac';\n storiesEl.innerHTML='';\n (skin.stories||[]).forEach(s=>{\n const st=document.createElement('article');\n st.className='story';\n st.innerHTML=`\n <div class=\"thumb\"><img decoding=\"async\" alt=\"\" src=\"${s.img}\"><\/div>\n <div class=\"body\"><h3>${s.title}<\/h3><p>${s.desc||''}<\/p><\/div>`;\n storiesEl.appendChild(st);\n });\n\n filterGrid('\uc804\uccb4');\n}\n\nfunction filterGrid(cat){\n [...gridEl.children].forEach(card=>{\n const show = (cat==='\uc804\uccb4' || card.dataset.cat===cat);\n card.style.display = show ? 'flex' : 'none';\n });\n}\n\nfunction populateSelect(){\n selectEl.innerHTML = SKINS.map(s=>`<option value=\"${s.id}\">${s.name}<\/option>`).join('');\n}\n\n\/* ========= \ud788\uc5b4\ub85c \uce90\ub7ec\uc140 ========= *\/\nlet idx=0, timer=null;\nfunction initHero(){\n idx=0;\n const root = document.querySelector('[data-carousel]');\n const slides = root.querySelector('.slides');\n const items = Array.from(root.querySelectorAll('.slide'));\n const dots = dotsEl;\n dots.innerHTML = items.map((_,i)=>`<button class=\"dot ${i===0?'active':''}\" data-i=\"${i}\" aria-label=\"${i+1}\ubc88 \uc2ac\ub77c\uc774\ub4dc\"><\/button>`).join('');\n dots.querySelectorAll('.dot').forEach(d=>d.addEventListener('click',()=>{ go(+d.dataset.i); startAuto(); }));\n root.querySelector('[data-prev]').onclick=()=>{ go(idx-1); startAuto(); };\n root.querySelector('[data-next]').onclick=()=>{ go(idx+1); startAuto(); };\n root.addEventListener('mouseenter', stopAuto);\n root.addEventListener('mouseleave', startAuto);\n\n function go(i){\n idx=(i+items.length)%items.length;\n slides.style.transform=`translateX(-${idx*100}%)`;\n dots.querySelectorAll('.dot').forEach((d,j)=>d.classList.toggle('active', j===idx));\n }\n function startAuto(){ stopAuto(); if(matchMedia('(prefers-reduced-motion: reduce)').matches) return; timer=setInterval(()=>go(idx+1),5000); }\n function stopAuto(){ if(timer) clearInterval(timer); }\n startAuto();\n}\n\n\/* ========= \ucd08\uae30\ud654 ========= *\/\npopulateSelect();\nconst urlSkin = new URL(location.href).searchParams.get('skin');\nlet current = SKINS.find(s=>s.id===urlSkin) || SKINS[0];\napplySkin(current);\nselectEl.value = current.id;\nselectEl.addEventListener('change', ()=>{\n current = SKINS.find(s=>s.id===selectEl.value) || SKINS[0];\n history.replaceState(null, '', `?skin=${current.id}`);\n applySkin(current);\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"Electro Demo \u2014 Main \ubcf8\ubb38 \ubc14\ub85c\uac00\uae30 Electro Demo \ubaa8\ubc14\uc77cTV\/\uc624\ub514\uc624\uc8fc\ubc29\uac00\uc804\ub9ac\ube59\uac00\uc804PC\/\uc8fc\ubcc0\uae30\uae30 \u2039 \u203a AI \uc2a4\ub9c8\ud2b8 \ubaa8\ub2c8\ud130 \ub7f0\uce6d\uc791\uc5c5\u00b7\uc5d4\ud130 \uc62c\uc778\uc6d0 \ube44\uc2a4\ud3ec\ud06c \uc815\uc218\uae30 \ucd9c\uc2dc\ubbf8\ub2c8\uba40 \ub514\uc790\uc778 \ub2e4\uc591\ud55c \uc2a4\ud1a0\ub9ac \uc81c\ud488\uc2a4\ub9c8\ud2b8\ud3f0\ud0dc\ube14\ub9bf\uc6cc\uce58\ubc84\uc988TV\uac00\uc804 \uae30\ud68d\uc804\/\ud61c\ud0dd\uc804\uccb4 \ubcf4\uae30\uce74\ub4dc \ud61c\ud0dd\uc544\uc6b8\ub81b \uace0\uac1d\uc11c\ube44\uc2a4FAQ\uc11c\ube44\uc2a4\uc13c\ud130 \ucc3e\uae30\uc124\uce58\/\ubc30\uc1a1 \ud68c\uc0ac\uc18c\uac1c\uae30\uc5c5\uc815\ubcf4\ucc44\uc6a9\ub274\uc2a4\ub8f8 \uc815\ucc45\uc774\uc6a9\uc57d\uad00\uac1c\uc778\uc815\ubcf4\ucc98\ub9ac\ubc29\uce68\ucfe0\ud0a4 \u00a9 2025 Electro Demo \u2014 \ubcf8 \ub370\ubaa8\ub294 CC0 \ub300\uccb4 \uc774\ubbf8\uc9c0\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-113","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/admin.idc.kr\/index.php?rest_route=\/wp\/v2\/pages\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/admin.idc.kr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/admin.idc.kr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/admin.idc.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/admin.idc.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=113"}],"version-history":[{"count":1,"href":"http:\/\/admin.idc.kr\/index.php?rest_route=\/wp\/v2\/pages\/113\/revisions"}],"predecessor-version":[{"id":360,"href":"http:\/\/admin.idc.kr\/index.php?rest_route=\/wp\/v2\/pages\/113\/revisions\/360"}],"wp:attachment":[{"href":"http:\/\/admin.idc.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":113,"date":"2015-06-30T13:52:09","date_gmt":"2015-06-30T04:52:09","guid":{"rendered":"http:\/\/admin.idc.kr\/?page_id=113"},"modified":"2025-08-23T15:50:55","modified_gmt":"2025-08-23T06:50:55","slug":"%eb%a9%94%ec%9d%b8%ed%8e%98%ec%9d%b4%ec%a7%80","status":"publish","type":"page","link":"http:\/\/admin.idc.kr\/","title":{"rendered":"\uba54\uc778\ud398\uc774\uc9c0"},"content":{"rendered":"\n\n\n\n\n\nElectro Demo \u2014 Main<\/title>\n<meta name=\"robots\" content=\"noindex,nofollow\" \/>\n<style>\n :root{\n \/* \uae30\ubcf8(\uc2a4\ud0a8 \ub85c\ub529 \uc804) \ud1a0\ud070 *\/\n --bg:#ffffff; --text:#0b0d10; --muted:#666b74; --line:#e7e9ee;\n --brand:#0b57d0; --accent:#0ea5e9; --hero:#f6f8fb;\n --radius:18px; --max:1280px;\n }\n *{box-sizing:border-box}\n html,body{margin:0;background:var(--bg);color:var(--text);font:16px\/1.6 \"Noto Sans KR\", system-ui, -apple-system, Segoe UI, Roboto, \"Apple SD Gothic Neo\", \"Malgun Gothic\", sans-serif}\n img{max-width:100%;display:block}\n a{color:inherit;text-decoration:none}\n button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}\n .container{max-width:var(--max);margin:0 auto;padding:0 20px}\n\n \/* Skip to content *\/\n .skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}\n .skip:focus{position:fixed;left:20px;top:20px;background:#000;color:#fff;padding:10px 14px;border-radius:10px;z-index:9999}\n\n \/* Header *\/\n header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}\n .hd{display:flex;align-items:center;height:64px;gap:16px}\n .logo{display:flex;align-items:center;gap:10px}\n .logoMark{width:28px;height:28px;border-radius:8px;background:var(--brand);\n box-shadow:0 6px 18px rgba(0,0,0,.15) inset, 0 2px 8px rgba(0,0,0,.05)}\n .logoTxt{font-weight:800;letter-spacing:.2px}\n nav{margin-left:auto}\n .nav{display:flex;gap:18px}\n .nav a{padding:8px 10px;border-radius:10px}\n .nav a:hover{background:#f5f6f8}\n .skin{margin-left:10px;border:1px solid var(--line);padding:6px 10px;border-radius:10px;background:#fff}\n\n \/* Hero *\/\n .hero{margin:18px 0}\n .carousel{position:relative;overflow:hidden;border-radius:24px}\n .slides{display:flex;transition:transform .6s ease}\n .slide{min-width:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:center;padding:46px;background:var(--hero)}\n .slide h1{font-size:clamp(26px,4vw,44px);line-height:1.2;margin:0 0 10px}\n .slide p{color:var(--muted);margin:0 0 18px}\n .btn{display:inline-block;padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:#fff}\n .btn.primary{background:var(--brand);color:#fff;border-color:transparent}\n .art{border-radius:18px;overflow:hidden;aspect-ratio:4\/3;background:#0f172a}\n .art img{width:100%;height:100%;object-fit:cover}\n .ctrl{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 8px}\n .ctrl button{width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.96)}\n .dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px}\n .dot{width:8px;height:8px;border-radius:50%;background:#cfd6e2}\n .dot.active{background:#111}\n\n \/* Tabs + Grid *\/\n .tabs{display:flex;gap:10px;overflow:auto;padding:10px 0;margin:18px 0 10px}\n .tabs button{white-space:nowrap;border:1px solid var(--line);padding:8px 12px;border-radius:999px;background:#fff}\n .tabs button.active{background:#111;color:#fff;border-color:#111}\n .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}\n .card{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;display:flex;flex-direction:column}\n .card .thumb{aspect-ratio:4\/3;background:#eef1f6}\n .card .thumb img{width:100%;height:100%;object-fit:cover}\n .card .body{padding:14px}\n .card h3{margin:0 0 6px;font-size:18px}\n .badge{display:inline-block;background:#111;color:#fff;font-size:12px;padding:4px 8px;border-radius:999px;margin-bottom:8px}\n .price{font-weight:700}\n .card .actions{display:flex;gap:8px;margin-top:auto;padding:14px;border-top:1px solid var(--line)}\n .card .actions .btn{flex:1;text-align:center}\n\n \/* Promo Split *\/\n .promo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0}\n .promo .p{position:relative;border-radius:24px;overflow:hidden;min-height:240px;display:grid;place-items:center}\n .promo .p::before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg, rgba(0,0,0,.15), rgba(0,0,0,.35))}\n .promo .txt{position:relative;color:#fff;text-align:center;padding:20px}\n .promo .bg1{background:url('https:\/\/picsum.photos\/1200\/700?random=211') center\/cover}\n .promo .bg2{background:url('https:\/\/picsum.photos\/1200\/700?random=212') center\/cover}\n\n \/* Stories *\/\n .stories{margin:30px 0}\n .stories h2{margin:0 0 10px}\n .snap{display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:14px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:6px}\n .story{scroll-snap-align:start;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}\n .story .thumb{aspect-ratio:16\/9;background:#eef1f6}\n .story .thumb img{width:100%;height:100%;object-fit:cover}\n .story .body{padding:14px}\n\n \/* Footer *\/\n footer{background:#f6f7f9;border-top:1px solid var(--line);margin-top:40px}\n .ft{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:28px 0}\n .ft h4{margin:6px 0 12px;font-size:14px}\n .ft a{display:block;padding:6px 0;color:#3a3b3f}\n .legal{border-top:1px solid var(--line);padding:14px 0;color:#6b6d71;font-size:13px;text-align:center}\n\n \/* Responsive *\/\n @media (max-width:1024px){\n .slide{grid-template-columns:1fr;gap:18px;padding:30px}\n .grid{grid-template-columns:repeat(2,1fr)}\n .promo{grid-template-columns:1fr}\n .ft{grid-template-columns:repeat(3,1fr)}\n }\n @media (max-width:720px){\n .ft{grid-template-columns:repeat(2,1fr)}\n }\n @media (prefers-reduced-motion:reduce){\n .slides{transition:none}\n }\n<\/style>\n<\/head>\n<body>\n<a href=\"#main\" class=\"skip\">\ubcf8\ubb38 \ubc14\ub85c\uac00\uae30<\/a>\n\n<header>\n <div class=\"container hd\">\n <div class=\"logo\">\n <span class=\"logoMark\" aria-hidden=\"true\"><\/span>\n <span class=\"logoTxt\" id=\"brandName\">Electro Demo<\/span>\n <\/div>\n <nav aria-label=\"\uc8fc\uc694 \uba54\ub274\">\n <div class=\"nav\">\n <a href=\"#\">\ubaa8\ubc14\uc77c<\/a><a href=\"#\">TV\/\uc624\ub514\uc624<\/a><a href=\"#\">\uc8fc\ubc29\uac00\uc804<\/a><a href=\"#\">\ub9ac\ube59\uac00\uc804<\/a><a href=\"#\">PC\/\uc8fc\ubcc0\uae30\uae30<\/a>\n <\/div>\n <\/nav>\n <select class=\"skin\" id=\"skinSelect\" aria-label=\"\ube0c\ub79c\ub4dc \uc2a4\ud0a8 \uc120\ud0dd\"><\/select>\n <\/div>\n<\/header>\n\n<main id=\"main\" class=\"container\">\n \n <section class=\"hero\" aria-label=\"\uc8fc\uc694 \ud504\ub85c\ubaa8\uc158\">\n <div class=\"carousel\" data-carousel>\n <div class=\"slides\" id=\"heroSlides\"><\/div>\n <div class=\"ctrl\" aria-hidden=\"true\">\n <button data-prev aria-label=\"\uc774\uc804 \uc2ac\ub77c\uc774\ub4dc\">\u2039<\/button>\n <button data-next aria-label=\"\ub2e4\uc74c \uc2ac\ub77c\uc774\ub4dc\">\u203a<\/button>\n <\/div>\n <div class=\"dots\" id=\"dots\" role=\"tablist\" aria-label=\"\uc2ac\ub77c\uc774\ub4dc \uc778\ub514\ucf00\uc774\ud130\"><\/div>\n <\/div>\n <\/section>\n\n \n <section aria-label=\"\uce74\ud14c\uace0\ub9ac\">\n <div class=\"tabs\" id=\"tabs\" role=\"tablist\"><\/div>\n <div class=\"grid\" id=\"grid\"><\/div>\n <\/section>\n\n \n <section class=\"promo\" aria-label=\"\ud504\ub85c\ubaa8\uc158\">\n <a class=\"p bg1\" href=\"#\"><div class=\"txt\"><h2 id=\"promo1\">AI \uc2a4\ub9c8\ud2b8 \ubaa8\ub2c8\ud130 \ub7f0\uce6d<\/h2><p>\uc791\uc5c5\u00b7\uc5d4\ud130 \uc62c\uc778\uc6d0<\/p><\/div><\/a>\n <a class=\"p bg2\" href=\"#\"><div class=\"txt\"><h2 id=\"promo2\">\ube44\uc2a4\ud3ec\ud06c \uc815\uc218\uae30 \ucd9c\uc2dc<\/h2><p>\ubbf8\ub2c8\uba40 \ub514\uc790\uc778<\/p><\/div><\/a>\n <\/section>\n\n \n <section class=\"stories\" aria-label=\"\ube0c\ub79c\ub4dc \uc2a4\ud1a0\ub9ac\">\n <h2 id=\"storiesTitle\">\ub2e4\uc591\ud55c \uc2a4\ud1a0\ub9ac<\/h2>\n <div class=\"snap\" id=\"stories\"><\/div>\n <\/section>\n<\/main>\n\n<footer>\n <div class=\"container ft\">\n <div><h4>\uc81c\ud488<\/h4><a href=\"#\">\uc2a4\ub9c8\ud2b8\ud3f0<\/a><a href=\"#\">\ud0dc\ube14\ub9bf<\/a><a href=\"#\">\uc6cc\uce58<\/a><a href=\"#\">\ubc84\uc988<\/a><a href=\"#\">TV<\/a><a href=\"#\">\uac00\uc804<\/a><\/div>\n <div><h4>\uae30\ud68d\uc804\/\ud61c\ud0dd<\/h4><a href=\"#\">\uc804\uccb4 \ubcf4\uae30<\/a><a href=\"#\">\uce74\ub4dc \ud61c\ud0dd<\/a><a href=\"#\">\uc544\uc6b8\ub81b<\/a><\/div>\n <div><h4>\uace0\uac1d\uc11c\ube44\uc2a4<\/h4><a href=\"#\">FAQ<\/a><a href=\"#\">\uc11c\ube44\uc2a4\uc13c\ud130 \ucc3e\uae30<\/a><a href=\"#\">\uc124\uce58\/\ubc30\uc1a1<\/a><\/div>\n <div><h4>\ud68c\uc0ac\uc18c\uac1c<\/h4><a href=\"#\">\uae30\uc5c5\uc815\ubcf4<\/a><a href=\"#\">\ucc44\uc6a9<\/a><a href=\"#\">\ub274\uc2a4\ub8f8<\/a><\/div>\n <div><h4>\uc815\ucc45<\/h4><a href=\"#\">\uc774\uc6a9\uc57d\uad00<\/a><a href=\"#\">\uac1c\uc778\uc815\ubcf4\ucc98\ub9ac\ubc29\uce68<\/a><a href=\"#\">\ucfe0\ud0a4<\/a><\/div>\n <\/div>\n <div class=\"container legal\">\u00a9 2025 Electro Demo \u2014 \ubcf8 \ub370\ubaa8\ub294 CC0 \ub300\uccb4 \uc774\ubbf8\uc9c0\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/div>\n<\/footer>\n\n<script>\n\/* ========= \uc2a4\ud0a8 \uc815\uc758: Blue(\uc0bc\uc131 \ub290\ub08c), Mint(LG \ub290\ub08c) =========\n \uc804\ubd80 CC0(\ubb34\uad8c\ub9ac) \uc774\ubbf8\uc9c0 URL \uc0ac\uc6a9 (picsum.photos) *\/\nconst SKINS = [\n {\n id:'blue',\n name:'Blue (\uc0bc\uc131 \ub290\ub08c)',\n tokens:{ brand:'#0b57d0', accent:'#0ea5e9', bg:'#ffffff', text:'#0b0d10', muted:'#666b74', line:'#e7e9ee', hero:'#f6f8fb' },\n hero:[\n { title:'\uc2e0\uc81c\ud488 \ud50c\ub798\uadf8\uc2ed \u2014 AI\uc758 \uc0c8 \uae30\uc900', desc:'\uace0\uc131\ub2a5 \uce69, \ucd08\uace0\ud574\uc0c1\ub3c4, \uc628\ub514\ubc14\uc774\uc2a4 AI', img:'https:\/\/picsum.photos\/1200\/800?random=1001' },\n { title:'\ud504\ub9ac\ubbf8\uc5c4 TV \u2014 \ud604\uc2e4\uc744 \ub354 \uac00\uae5d\uac8c', desc:'\ud000\ud140 \uceec\ub7ec, AI \uc5c5\uc2a4\ucf00\uc77c\ub9c1', img:'https:\/\/picsum.photos\/1200\/800?random=1002' },\n { title:'\ube44\uc2a4\ud3ec\ud06c \ud0a4\uce5c \u2014 \ub098\ub9cc\uc758 \uc8fc\ubc29', desc:'\ubaa8\ub4c8\ud615 \ub514\uc790\uc778, \uc5d0\ub108\uc9c0 \uc808\uac10', img:'https:\/\/picsum.photos\/1200\/800?random=1003' },\n ],\n tabs:['\uc804\uccb4','\ubaa8\ubc14\uc77c','TV\/\uc624\ub514\uc624','\uc8fc\ubc29\uac00\uc804','\ub9ac\ube59\uac00\uc804','PC\/\uc8fc\ubcc0\uae30\uae30','\uc6e8\uc5b4\ub7ec\ube14'],\n products:[\n { cat:'\ubaa8\ubc14\uc77c', badge:'\uc2e0\uc81c\ud488', title:'\uc2a4\ub9c8\ud2b8\ud3f0 A', desc:'AI \uce74\uba54\ub77c', price:'\u20a91,190,000~', img:'https:\/\/picsum.photos\/800\/600?random=1101' },\n { cat:'TV\/\uc624\ub514\uc624', title:'QLED 4K TV', desc:'AI \uc5c5\uc2a4\ucf00\uc77c\ub9c1', price:'\u20a91,590,000~', img:'https:\/\/picsum.photos\/800\/600?random=1102' },\n { cat:'\uc8fc\ubc29\uac00\uc804', title:'4\ub3c4\uc5b4 \ub0c9\uc7a5\uace0', desc:'\ubaa8\ub4c8\ud615\/\uc808\uc804', price:'\u20a92,290,000~', img:'https:\/\/picsum.photos\/800\/600?random=1103' },\n { cat:'PC\/\uc8fc\ubcc0\uae30\uae30', title:'\uc6b8\ud2b8\ub77c\ubd81', desc:'\ucd08\uacbd\ub7c9\u00b7\uae34 \ubc30\ud130\ub9ac', price:'\u20a91,390,000~', img:'https:\/\/picsum.photos\/800\/600?random=1104' },\n { cat:'\uc6e8\uc5b4\ub7ec\ube14', title:'\uc6cc\uce58', desc:'AI \ud5ec\uc2a4\ucf54\uce6d', price:'\u20a9329,000~', img:'https:\/\/picsum.photos\/800\/600?random=1105' },\n { cat:'\ub9ac\ube59\uac00\uc804', title:'\uacf5\uae30\uccad\uc815\uae30', desc:'\ucd08\ubbf8\uc138\uba3c\uc9c0', price:'\u20a9249,000~', img:'https:\/\/picsum.photos\/800\/600?random=1106' },\n { cat:'\uc8fc\ubc29\uac00\uc804', title:'\uc2dd\uae30\uc138\ucc99\uae30', desc:'\uc800\uc18c\uc74c', price:'\u20a9899,000~', img:'https:\/\/picsum.photos\/800\/600?random=1107' },\n { cat:'TV\/\uc624\ub514\uc624', title:'\uc0ac\uc6b4\ub4dc\ubc14', desc:'\ub3cc\ube44 \uc560\ud2b8\ubaa8\uc2a4', price:'\u20a9399,000~', img:'https:\/\/picsum.photos\/800\/600?random=1108' },\n ],\n storiesTitle:'\ube0c\ub79c\ub4dc \uc2a4\ud1a0\ub9ac',\n stories:[\n { title:'One UI \ud301 \ubaa8\uc74c', desc:'\uc0dd\uc0b0\uc131 \ud5a5\uc0c1', img:'https:\/\/picsum.photos\/1200\/700?random=1201' },\n { title:'\uc2a4\ub9c8\ud2b8\ud648 \uc544\uc774\ub514\uc5b4', desc:'\uc9d1\uc744 \ub354 \ub611\ub611\ud558\uac8c', img:'https:\/\/picsum.photos\/1200\/700?random=1202' },\n { title:'\ube44\ud558\uc778\ub4dc \uc81c\uc791\uae30', desc:'\uc124\uacc4 \uc774\uc57c\uae30', img:'https:\/\/picsum.photos\/1200\/700?random=1203' },\n { title:'\uc9c0\uc18d\uac00\ub2a5\uc131', desc:'\uc21c\ud658 \uc18c\uc7ac', img:'https:\/\/picsum.photos\/1200\/700?random=1204' },\n ]\n },\n {\n id:'mint',\n name:'Mint (LG \ub290\ub08c)',\n tokens:{ brand:'#0ea5a3', accent:'#10b981', bg:'#ffffff', text:'#0b0d10', muted:'#616874', line:'#e6e8ee', hero:'#ecfffb' },\n hero:[\n { title:'Light & Smart', desc:'Battery for days', img:'https:\/\/picsum.photos\/1200\/800?random=2001' },\n { title:'Cinematic TV', desc:'Dolby Vision', img:'https:\/\/picsum.photos\/1200\/800?random=2002' },\n ],\n tabs:['\uc804\uccb4','\ubaa8\ubc14\uc77c','TV\/\uc624\ub514\uc624','\ub9ac\ube59\uac00\uc804','\uc6e8\uc5b4\ub7ec\ube14'],\n products:[\n { cat:'\ubaa8\ubc14\uc77c', badge:'New', title:'Lite Phone', desc:'Feather 160g', price:'\u20a9699,000~', img:'https:\/\/picsum.photos\/800\/600?random=2101' },\n { cat:'TV\/\uc624\ub514\uc624', title:'Soundbar 7.1', desc:'Wireless', price:'\u20a9599,000~', img:'https:\/\/picsum.photos\/800\/600?random=2102' },\n { cat:'\ub9ac\ube59\uac00\uc804', title:'Air Purifier', desc:'PM1.0', price:'\u20a9279,000~', img:'https:\/\/picsum.photos\/800\/600?random=2103' },\n { cat:'\uc6e8\uc5b4\ub7ec\ube14', title:'Watch Fit', desc:'GPS\/HRV', price:'\u20a9229,000~', img:'https:\/\/picsum.photos\/800\/600?random=2104' },\n ],\n storiesTitle:'Inspiration',\n stories:[\n { title:'Design Story', desc:'Material craft', img:'https:\/\/picsum.photos\/1200\/700?random=2201' },\n { title:'Smart Routine', desc:'Automation', img:'https:\/\/picsum.photos\/1200\/700?random=2202' },\n ]\n }\n];\n\n\/* ========= \uc720\ud2f8 ========= *\/\nconst $ = s => document.querySelector(s);\nfunction setTokens(t){\n const r=document.documentElement.style;\n r.setProperty('--brand', t.brand);\n r.setProperty('--accent', t.accent);\n r.setProperty('--bg', t.bg);\n r.setProperty('--text', t.text);\n r.setProperty('--muted', t.muted);\n r.setProperty('--line', t.line);\n r.setProperty('--hero', t.hero);\n document.body.style.background=t.bg;\n document.body.style.color=t.text;\n}\n\n\/* ========= DOM \ucc38\uc870 ========= *\/\nconst nameEl = $('#brandName');\nconst slidesEl = $('#heroSlides');\nconst dotsEl = $('#dots');\nconst tabsEl = $('#tabs');\nconst gridEl = $('#grid');\nconst storiesTitleEl = $('#storiesTitle');\nconst storiesEl = $('#stories');\nconst selectEl = $('#skinSelect');\n\n\/* ========= \ub80c\ub354\ub9c1 ========= *\/\nfunction applySkin(skin){\n setTokens(skin.tokens);\n nameEl.textContent = `Electro Demo \u2014 ${skin.name}`;\n\n \/\/ Hero\n slidesEl.innerHTML='';\n skin.hero.forEach(h=>{\n const el=document.createElement('article');\n el.className='slide';\n el.innerHTML=`\n <div>\n <h1>${h.title}<\/h1>\n <p>${h.desc||''}<\/p>\n <a class=\"btn primary\" href=\"#\">\uc790\uc138\ud788 \ubcf4\uae30<\/a>\n <a class=\"btn\" href=\"#\">\ud61c\ud0dd<\/a>\n <\/div>\n <div class=\"art\"><img decoding=\"async\" alt=\"\" src=\"${h.img}\"><\/div>`;\n slidesEl.appendChild(el);\n });\n initHero();\n\n \/\/ Tabs\n tabsEl.innerHTML='';\n (skin.tabs||['\uc804\uccb4']).forEach((t,i)=>{\n const b=document.createElement('button');\n b.textContent=t; b.dataset.filter=t;\n b.className='tab'+(i===0?' active':'');\n b.addEventListener('click',()=>{\n [...tabsEl.children].forEach(k=>k.classList.remove('active'));\n b.classList.add('active');\n filterGrid(t);\n });\n tabsEl.appendChild(b);\n });\n\n \/\/ Products\n gridEl.innerHTML='';\n (skin.products||[]).forEach(p=>{\n const c=document.createElement('article');\n c.className='card'; c.dataset.cat=p.cat||'\uc804\uccb4';\n c.innerHTML=`\n <div class=\"thumb\"><img decoding=\"async\" alt=\"\" src=\"${p.img}\"><\/div>\n <div class=\"body\">\n ${p.badge?`<span class=\"badge\">${p.badge}<\/span>`:''}\n <h3>${p.title}<\/h3>\n <p class=\"desc\">${p.desc||''}<\/p>\n <div class=\"price\">${p.price||''}<\/div>\n <\/div>\n <div class=\"actions\">\n <a class=\"btn\" href=\"#\">\uc790\uc138\ud788<\/a>\n <a class=\"btn primary\" href=\"#\">\uad6c\ub9e4\ud558\uae30<\/a>\n <\/div>`;\n gridEl.appendChild(c);\n });\n\n \/\/ Stories\n storiesTitleEl.textContent=skin.storiesTitle||'\uc2a4\ud1a0\ub9ac';\n storiesEl.innerHTML='';\n (skin.stories||[]).forEach(s=>{\n const st=document.createElement('article');\n st.className='story';\n st.innerHTML=`\n <div class=\"thumb\"><img decoding=\"async\" alt=\"\" src=\"${s.img}\"><\/div>\n <div class=\"body\"><h3>${s.title}<\/h3><p>${s.desc||''}<\/p><\/div>`;\n storiesEl.appendChild(st);\n });\n\n filterGrid('\uc804\uccb4');\n}\n\nfunction filterGrid(cat){\n [...gridEl.children].forEach(card=>{\n const show = (cat==='\uc804\uccb4' || card.dataset.cat===cat);\n card.style.display = show ? 'flex' : 'none';\n });\n}\n\nfunction populateSelect(){\n selectEl.innerHTML = SKINS.map(s=>`<option value=\"${s.id}\">${s.name}<\/option>`).join('');\n}\n\n\/* ========= \ud788\uc5b4\ub85c \uce90\ub7ec\uc140 ========= *\/\nlet idx=0, timer=null;\nfunction initHero(){\n idx=0;\n const root = document.querySelector('[data-carousel]');\n const slides = root.querySelector('.slides');\n const items = Array.from(root.querySelectorAll('.slide'));\n const dots = dotsEl;\n dots.innerHTML = items.map((_,i)=>`<button class=\"dot ${i===0?'active':''}\" data-i=\"${i}\" aria-label=\"${i+1}\ubc88 \uc2ac\ub77c\uc774\ub4dc\"><\/button>`).join('');\n dots.querySelectorAll('.dot').forEach(d=>d.addEventListener('click',()=>{ go(+d.dataset.i); startAuto(); }));\n root.querySelector('[data-prev]').onclick=()=>{ go(idx-1); startAuto(); };\n root.querySelector('[data-next]').onclick=()=>{ go(idx+1); startAuto(); };\n root.addEventListener('mouseenter', stopAuto);\n root.addEventListener('mouseleave', startAuto);\n\n function go(i){\n idx=(i+items.length)%items.length;\n slides.style.transform=`translateX(-${idx*100}%)`;\n dots.querySelectorAll('.dot').forEach((d,j)=>d.classList.toggle('active', j===idx));\n }\n function startAuto(){ stopAuto(); if(matchMedia('(prefers-reduced-motion: reduce)').matches) return; timer=setInterval(()=>go(idx+1),5000); }\n function stopAuto(){ if(timer) clearInterval(timer); }\n startAuto();\n}\n\n\/* ========= \ucd08\uae30\ud654 ========= *\/\npopulateSelect();\nconst urlSkin = new URL(location.href).searchParams.get('skin');\nlet current = SKINS.find(s=>s.id===urlSkin) || SKINS[0];\napplySkin(current);\nselectEl.value = current.id;\nselectEl.addEventListener('change', ()=>{\n current = SKINS.find(s=>s.id===selectEl.value) || SKINS[0];\n history.replaceState(null, '', `?skin=${current.id}`);\n applySkin(current);\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"Electro Demo \u2014 Main \ubcf8\ubb38 \ubc14\ub85c\uac00\uae30 Electro Demo \ubaa8\ubc14\uc77cTV\/\uc624\ub514\uc624\uc8fc\ubc29\uac00\uc804\ub9ac\ube59\uac00\uc804PC\/\uc8fc\ubcc0\uae30\uae30 \u2039 \u203a AI \uc2a4\ub9c8\ud2b8 \ubaa8\ub2c8\ud130 \ub7f0\uce6d\uc791\uc5c5\u00b7\uc5d4\ud130 \uc62c\uc778\uc6d0 \ube44\uc2a4\ud3ec\ud06c \uc815\uc218\uae30 \ucd9c\uc2dc\ubbf8\ub2c8\uba40 \ub514\uc790\uc778 \ub2e4\uc591\ud55c \uc2a4\ud1a0\ub9ac \uc81c\ud488\uc2a4\ub9c8\ud2b8\ud3f0\ud0dc\ube14\ub9bf\uc6cc\uce58\ubc84\uc988TV\uac00\uc804 \uae30\ud68d\uc804\/\ud61c\ud0dd\uc804\uccb4 \ubcf4\uae30\uce74\ub4dc \ud61c\ud0dd\uc544\uc6b8\ub81b \uace0\uac1d\uc11c\ube44\uc2a4FAQ\uc11c\ube44\uc2a4\uc13c\ud130 \ucc3e\uae30\uc124\uce58\/\ubc30\uc1a1 \ud68c\uc0ac\uc18c\uac1c\uae30\uc5c5\uc815\ubcf4\ucc44\uc6a9\ub274\uc2a4\ub8f8 \uc815\ucc45\uc774\uc6a9\uc57d\uad00\uac1c\uc778\uc815\ubcf4\ucc98\ub9ac\ubc29\uce68\ucfe0\ud0a4 \u00a9 2025 Electro Demo \u2014 \ubcf8 \ub370\ubaa8\ub294 CC0 \ub300\uccb4 \uc774\ubbf8\uc9c0\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-113","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/admin.idc.kr\/index.php?rest_route=\/wp\/v2\/pages\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/admin.idc.kr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/admin.idc.kr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/admin.idc.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/admin.idc.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=113"}],"version-history":[{"count":1,"href":"http:\/\/admin.idc.kr\/index.php?rest_route=\/wp\/v2\/pages\/113\/revisions"}],"predecessor-version":[{"id":360,"href":"http:\/\/admin.idc.kr\/index.php?rest_route=\/wp\/v2\/pages\/113\/revisions\/360"}],"wp:attachment":[{"href":"http:\/\/admin.idc.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}