/* CMC테크 홈페이지 첫 화면 v3.1(구 고리 앞뒤 분리·밤면·카드 그림 교차·배경 분해도 띠).1(구 고리 앞뒤 분리·밤면·카드 그림 교차·배경 분해도 띠) · "연결되는 소프트웨어" (2026-10-28 Claude)
   - v3: CMC-EIMS를 지구 모양 구(球)로 만들어 3D 링 안에 넣고(카드가 구 앞·뒤를 실제 깊이로 지나감), 링 반지름을 키웠다.
   - 슬로건 6개(AI 시대·디지털 밸류체인·MES·자동차 전장 라이프사이클 PLM·WSP·SCM·AiFi 실시간 재무·CMC-EIMS)와 함께
     배경 사진(개발·자동화·SMT 로봇·자동차 전장·사무실·조립)과 조명 색이 바뀌고, 조명이 켜졌다 꺼지듯 숨쉰다.
   - 모든 클래스 cx- 접두사. 기존 .renew-hero 높이 규칙과 site-renewal.js의 #heroPause 를 그대로 쓴다. */
.renew-hero.cx-hero{--cx-indigo:#5b7cfa;--cx-violet:#b36cff;--cx-teal:#1fd1bf;--cx-coral:#ff6b8a;--cx-amber:#ffb547;--cx-green:#5ad17a;--cx-ink:#eaf1ff;--cx-dim:#b7c6e2;--cx-tone:#1fd1bf;--cx-base:#0a1630;--cx-gutter:max(24px,calc((100vw - min(1800px,94vw))/2));background:#0a1630;color:var(--cx-ink);min-height:640px;max-height:1240px;height:calc(100svh - 84px);overflow:clip!important;font-family:'Noto Sans KR','Manrope',sans-serif}
.cx-hero .renew-slide.cx-slide{background:var(--cx-base);opacity:1;visibility:visible;transition:background-color 1.8s ease}
.cx-hero[data-cx-tone=teal]{--cx-tone:#1fd1bf;--cx-base:#081a2b}.cx-hero[data-cx-tone=violet]{--cx-tone:#b36cff;--cx-base:#120f33}.cx-hero[data-cx-tone=amber]{--cx-tone:#ffb547;--cx-base:#161322}.cx-hero[data-cx-tone=indigo]{--cx-tone:#7f9bff;--cx-base:#0a1434}.cx-hero[data-cx-tone=coral]{--cx-tone:#ff6b8a;--cx-base:#1a0f22}.cx-hero[data-cx-tone=multi]{--cx-tone:#cf9dff;--cx-base:#0f1330}
/* ---- 배경: 슬로건에 맞는 사진 + 숨쉬는 조명 + 빛줄기 + 격자 ---- */
.cx-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cx-photo{position:absolute;inset:-5%;background-size:cover;background-position:center;opacity:0;transition:opacity 2.2s ease;animation:cx-ken 44s ease-in-out infinite alternate;will-change:opacity,transform}
.cx-photo.is-on{opacity:.58}
.cx-photo[data-bg=development]{background-image:url(assets/hero-connected/bg-development.webp)}.cx-photo[data-bg=automation]{background-image:url(assets/hero-connected/bg-automation.webp);animation-delay:-9s}.cx-photo[data-bg=smt-robots]{background-image:url(assets/hero-connected/bg-smt-robots.webp);animation-delay:-18s}.cx-photo[data-bg=automotive]{background-image:url(assets/hero-connected/bg-automotive.webp);background-position:center 40%;animation-delay:-27s}.cx-photo[data-bg=office]{background-image:url(assets/hero-connected/bg-office.webp);animation-delay:-36s}.cx-photo[data-bg=assembly]{background-image:url(assets/hero-connected/bg-assembly.webp);animation-delay:-5s}
@keyframes cx-ken{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,1%)}}
.cx-shade{position:absolute;inset:0;background:linear-gradient(90deg,#060b1cf0 0%,#060b1cc4 36%,#060b1c6e 62%,#060b1ce0 100%),linear-gradient(180deg,#060b1c99,transparent 28%,transparent 70%,#060b1cf2)}
.cx-blob{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.16;transition:opacity 2.4s ease;width:40vw;height:40vw;min-width:420px;min-height:420px}
.cx-blob>i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--bc),transparent 64%);animation:cx-drift 26s ease-in-out infinite alternate,cx-breathe 9s ease-in-out infinite;animation-delay:var(--d,0s)}
.cx-b1{--bc:var(--cx-indigo);left:-14%;top:-26%}.cx-b2{--bc:var(--cx-violet);right:-10%;top:-20%;--d:-7s}.cx-b3{--bc:var(--cx-teal);right:14%;bottom:-36%;--d:-13s}.cx-b4{--bc:var(--cx-coral);left:24%;bottom:-26%;width:30vw;height:30vw;min-width:320px;min-height:320px;--d:-4s}.cx-b5{--bc:var(--cx-amber);left:-6%;top:28%;width:32vw;height:32vw;min-width:340px;min-height:340px;--d:-17s}.cx-b6{--bc:#5bc8ff;left:38%;top:-30%;--d:-21s}
.cx-hero[data-cx-tone=teal] .cx-b3,.cx-hero[data-cx-tone=teal] .cx-b6{opacity:.7}.cx-hero[data-cx-tone=teal] .cx-b1{opacity:.4}
.cx-hero[data-cx-tone=violet] .cx-b2,.cx-hero[data-cx-tone=violet] .cx-b1{opacity:.72}.cx-hero[data-cx-tone=violet] .cx-b4{opacity:.3}
.cx-hero[data-cx-tone=amber] .cx-b5,.cx-hero[data-cx-tone=amber] .cx-b4{opacity:.66}.cx-hero[data-cx-tone=amber] .cx-b3{opacity:.3}
.cx-hero[data-cx-tone=indigo] .cx-b1,.cx-hero[data-cx-tone=indigo] .cx-b6{opacity:.72}.cx-hero[data-cx-tone=indigo] .cx-b3{opacity:.38}
.cx-hero[data-cx-tone=coral] .cx-b4,.cx-hero[data-cx-tone=coral] .cx-b2{opacity:.66}.cx-hero[data-cx-tone=coral] .cx-b5{opacity:.42}
.cx-hero[data-cx-tone=multi] .cx-b1,.cx-hero[data-cx-tone=multi] .cx-b2,.cx-hero[data-cx-tone=multi] .cx-b3,.cx-hero[data-cx-tone=multi] .cx-b4,.cx-hero[data-cx-tone=multi] .cx-b5{opacity:.5}
@keyframes cx-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,4vw) scale(1.15)}}
@keyframes cx-breathe{0%,100%{opacity:.55}50%{opacity:1}}
.cx-spot{position:absolute;width:46vw;height:46vw;min-width:480px;min-height:480px;border-radius:50%;background:radial-gradient(circle,var(--cx-tone) 0%,transparent 60%);mix-blend-mode:screen;filter:blur(40px);opacity:0;animation:cx-spot 13s ease-in-out infinite;animation-delay:var(--d,0s)}
.cx-s1{left:34%;top:-12%}.cx-s2{left:4%;bottom:-18%;--d:-6.5s}
@keyframes cx-spot{0%,100%{opacity:0;transform:scale(.8)}45%{opacity:.42;transform:scale(1.08)}}
.cx-beam{position:absolute;top:-30%;bottom:-30%;width:28vw;min-width:260px;left:-40%;background:linear-gradient(90deg,transparent,#ffffff0d 40%,#ffffff1c 50%,#ffffff0d 60%,transparent);transform:skewX(-16deg);animation:cx-beam 17s linear infinite;animation-delay:var(--d,0s);mix-blend-mode:screen}
.cx-beam.cx-beam2{width:14vw;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cx-tone) 22%,transparent) 50%,transparent);--d:-8s;animation-duration:23s}
@keyframes cx-beam{from{left:-40%;opacity:0}12%{opacity:1}88%{opacity:1}to{left:120%;opacity:0}}
.cx-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse at 62% 48%,#000 25%,transparent 78%)}
.cx-art{position:absolute;left:calc(var(--cx-gutter) - 2vw);bottom:9%;width:min(58vw,1180px);height:44%;background:left bottom/contain no-repeat;opacity:0;transition:opacity 2.2s ease;mix-blend-mode:screen;filter:brightness(.85) saturate(.9);mask-image:linear-gradient(90deg,#000 50%,transparent 100%),linear-gradient(180deg,transparent 0,#000 25%);-webkit-mask-composite:source-in;mask-composite:intersect;pointer-events:none}
.cx-art.is-on{opacity:.34}
.cx-art[data-art=automotive]{background-image:url(assets/hero-connected/art-automotive.webp)}.cx-art[data-art=factory]{background-image:url(assets/hero-connected/art-factory.webp)}.cx-art[data-art=eims]{background-image:url(assets/hero-connected/art-eims.webp)}
/* ---- 본문 2단: 폭에 따라 함께 커진다 ---- */
.cx-wrap{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,39fr) minmax(0,61fr);gap:clamp(16px,2.4vw,56px);align-items:center;padding:0 var(--cx-gutter) 64px}
.cx-copy{min-width:0;animation:cx-rise .9s .1s both}
.cx-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 clamp(18px,1.6vw,30px);font:700 clamp(10px,.62vw,13px)/1 'Manrope',sans-serif;letter-spacing:.2em;color:#9fb6ff}
.cx-eyebrow>span{padding:.55em .9em;border-radius:999px;background:linear-gradient(90deg,var(--cx-indigo),var(--cx-violet));color:#fff;letter-spacing:.14em}
.cx-slogans{position:relative;min-height:2.6em;font-size:clamp(34px,3.5vw,80px)}
.cx-hero .cx-title{position:absolute;left:0;top:0;right:0;margin:0;font-size:1em;line-height:1.2;letter-spacing:-.05em;font-weight:800;color:#fff!important;-webkit-text-fill-color:#fff;word-break:keep-all;text-shadow:0 2px 30px #02132666;opacity:0;transform:translateY(.35em);transition:opacity .7s ease,transform .7s ease;pointer-events:none}
.cx-hero .cx-title.is-on{position:relative;opacity:1;transform:none;pointer-events:auto}
.cx-hero .cx-title>span{display:block;font-weight:500;font-size:.62em;letter-spacing:-.03em;color:#cfe0ff;margin-bottom:.22em}
.cx-hero .cx-title>em{font-style:normal;background:linear-gradient(90deg,#fff 0%,#bfe9ff 45%,#8ef0e6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.cx-hero .cx-title[data-tone=violet]>em{background-image:linear-gradient(90deg,#fff,#dcc5ff 50%,#b36cff)}.cx-hero .cx-title[data-tone=amber]>em{background-image:linear-gradient(90deg,#fff,#ffe1a8 50%,#ffb547)}.cx-hero .cx-title[data-tone=coral]>em{background-image:linear-gradient(90deg,#fff,#ffc2d0 50%,#ff6b8a)}.cx-hero .cx-title[data-tone=indigo]>em{background-image:linear-gradient(90deg,#fff,#c7d4ff 50%,#7f9bff)}.cx-hero .cx-title[data-tone=multi]>em{background-image:linear-gradient(90deg,#8ea4ff,#cf9dff 35%,#ff6b8a 70%,#ffb547)}
.cx-lead{margin:clamp(16px,1.4vw,26px) 0 0;font-size:clamp(14px,.95vw,20px);line-height:1.85;color:var(--cx-dim);max-width:34em;word-break:keep-all;min-height:5.55em;transition:opacity .5s}
.cx-lead.is-fading{opacity:0}
.cx-dots{display:flex;gap:8px;margin:clamp(14px,1.2vw,22px) 0 0;padding:0;list-style:none}
.cx-dots li{width:30px;height:4px;border-radius:4px;background:#ffffff2a;overflow:hidden;position:relative}
.cx-dots li.is-on::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--cx-tone),#fff);transform-origin:left;animation:cx-fill var(--cx-slogan-ms,7500ms) linear forwards}
@keyframes cx-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cx-chips{display:flex;flex-wrap:wrap;gap:8px 20px;margin:clamp(20px,1.8vw,34px) 0 0;padding:0;list-style:none}
.cx-chips li{font-size:clamp(12px,.72vw,15px);color:var(--cx-dim);display:flex;align-items:center;gap:8px;white-space:nowrap}
.cx-chips li::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cx-teal);box-shadow:0 0 12px var(--cx-teal)}
.cx-chips li:nth-child(2)::before{background:var(--cx-amber);box-shadow:0 0 12px var(--cx-amber)}.cx-chips li:nth-child(3)::before{background:var(--cx-coral);box-shadow:0 0 12px var(--cx-coral)}
.cx-chips b{display:contents;color:#fff;font-weight:800}
/* 실시간 업무 로그(작게) */
.cx-term{margin-top:clamp(18px,1.6vw,30px);max-width:36em;border-radius:12px;background:#0b1326cc;border:1px solid #ffffff22;box-shadow:0 18px 50px #0007;overflow:hidden;animation:cx-rise 1s 1s both}
.cx-term-bar{display:flex;align-items:center;gap:6px;padding:7px 12px;background:#ffffff0c;border-bottom:1px solid #ffffff14}
.cx-term-bar i{width:8px;height:8px;border-radius:50%;background:#ff6b6b}.cx-term-bar i+i{background:#ffc247}.cx-term-bar i+i+i{background:#4bd27a}
.cx-term-bar span{margin-left:8px;font:600 clamp(9px,.55vw,11px) 'Manrope',monospace;letter-spacing:.12em;color:#8fa3c7}
.cx-term-body{padding:9px 12px 10px;font:500 clamp(10px,.66vw,13px)/1.75 Consolas,'SF Mono',Menlo,monospace;color:#cfe0ff;min-height:3.6em}
.cx-term-body p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-term-body p b{font-weight:700;color:var(--c,#8ef0e6)}
.cx-term-body p.is-typing::after{content:'▍';color:var(--cx-teal);animation:cx-blink 1s steps(2) infinite}
/* ---- 입체 장면: 구(CMC-EIMS) + 넓은 3D 링 ---- */
.cx-stage{position:relative;justify-self:center;width:min(100%,calc(100svh - 84px - 120px),1240px);min-width:0;animation:cx-rise 1s .25s both}
.cx-scene{position:relative;width:100%;aspect-ratio:1/0.8;perspective:calc(var(--w,700px) * 2.1);perspective-origin:50% 40%;transform-style:preserve-3d}
.cx-floor{position:absolute;left:50%;top:50%;width:calc(var(--r,240px) * 2.5);height:calc(var(--r,240px) * 2.5);margin:calc(var(--r,240px) * -1.25);border-radius:50%;transform:translateY(calc(var(--cw,180px) * .55)) rotateX(74deg);border:1px solid #ffffff24;background:radial-gradient(circle,transparent 34%,#5b7cfa10 50%,#5b7cfa22 64%,transparent 74%);box-shadow:0 0 90px #5b7cfa1a inset}
.cx-floor::before{content:'';position:absolute;inset:16%;border-radius:50%;border:1px dashed #ffffff1c}
.cx-floor::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:2px solid transparent;border-top-color:var(--cx-tone);border-right-color:var(--cx-tone);opacity:.7;filter:blur(1px);animation:cx-spin 9s linear infinite}
.cx-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-16deg) rotateY(0deg);animation:cx-orbit 50s linear infinite}
@keyframes cx-orbit{from{transform:rotateX(-16deg) rotateY(0deg)}to{transform:rotateX(-16deg) rotateY(360deg)}}
.cx-card{position:absolute;left:0;top:0;width:var(--cw);height:calc(var(--cw) * 0.86);margin-left:calc(var(--cw) * -.5);margin-top:calc(var(--cw) * -.43);transform-style:preserve-3d;transform:rotateY(var(--a)) translateZ(var(--r));opacity:0;animation:cx-card-in .8s cubic-bezier(.2,.9,.3,1.1) forwards;animation-delay:var(--d,0s)}
@keyframes cx-card-in{to{opacity:1}}
.cx-face{position:absolute;inset:0;border-radius:calc(var(--cw) * .06);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #ffffff33;box-shadow:0 30px 70px #000a,0 0 0 1px #0006 inset;background:#0d1a3a}
.cx-face.cx-front{display:flex;flex-direction:column}
.cx-face.cx-front::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);z-index:2}
.cx-face.cx-front .cx-pic{position:relative;height:67%;overflow:hidden;background:#0b1530}
.cx-face.cx-front img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(1.05)}
.cx-face.cx-front img.cx-img-b{opacity:0;animation:cx-xfade 20s ease-in-out infinite;animation-delay:var(--x,0s)}
@keyframes cx-xfade{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
.cx-face.cx-front figcaption{flex:1;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--cw) * .03) calc(var(--cw) * .05);background:linear-gradient(180deg,#0e1b3b,#0b1530)}
.cx-face.cx-front b{font:800 calc(var(--cw) * .085)/1.05 'Manrope',sans-serif;letter-spacing:-.02em;color:#fff}
.cx-face.cx-front small{display:block;margin-top:calc(var(--cw) * .02);font-size:calc(var(--cw) * .04);line-height:1.4;color:#c3d1ef;word-break:keep-all}
.cx-face.cx-front i{position:absolute;right:calc(var(--cw) * .04);bottom:calc(var(--cw) * .085);width:calc(var(--cw) * .035);height:calc(var(--cw) * .035);border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c);animation:cx-blink 2.2s ease-in-out infinite}
.cx-face.cx-back{transform:rotateY(180deg);display:grid;place-items:center;background:linear-gradient(160deg,#121f44,#0a1430);color:#7f93b8}
.cx-face.cx-back b{font:800 calc(var(--cw) * .11) 'Manrope',sans-serif;letter-spacing:-.02em;color:#ffffff55}
.cx-face.cx-back small{display:block;margin-top:.4em;font-size:calc(var(--cw) * .04);letter-spacing:.2em;color:#ffffff40}
/* 지구 같은 구: 링과 같은 3D 공간의 z=0 에 선다 (앞 카드는 구 앞, 뒤 카드는 구 뒤로 지나간다) */
.cx-globe{position:absolute;left:50%;top:45%;width:calc(var(--w,700px) * .31);aspect-ratio:1;transform:translate(-50%,-50%) translateZ(0);display:grid;place-items:center}
.cx-glow{position:absolute;z-index:0;inset:-18%;border-radius:50%;background:conic-gradient(from 0deg,var(--cx-indigo),var(--cx-violet),var(--cx-coral),var(--cx-amber),var(--cx-green),var(--cx-teal),var(--cx-indigo));filter:blur(22px);opacity:.75;animation:cx-spin 16s linear infinite}
.cx-sphere{position:absolute;z-index:2;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 36% 30%,#6b90ff 0%,#2f52cf 20%,#17307f 48%,#091a52 74%,#03082a 100%);outline:1px solid #a9c6ff33;box-shadow:inset calc(var(--w,700px) * -.03) calc(var(--w,700px) * -.035) calc(var(--w,700px) * .08) #02061a,inset calc(var(--w,700px) * .012) calc(var(--w,700px) * .012) calc(var(--w,700px) * .05) #8fb0ff55,0 calc(var(--w,700px) * .03) calc(var(--w,700px) * .09) #000b}
.cx-sphere>i{position:absolute;inset:0;border-radius:50%}
.cx-map{background-image:radial-gradient(circle,#a9c6ff 0 .9px,transparent 1.6px);background-size:calc(var(--w,700px) * .018) calc(var(--w,700px) * .018);opacity:.5;mask-image:radial-gradient(circle at 50% 50%,#000 44%,transparent 71%);animation:cx-map 40s linear infinite}
.cx-map2{background-image:radial-gradient(ellipse at 22% 38%,#79a6ff66 0 10%,transparent 24%),radial-gradient(ellipse at 58% 30%,#8fb6ff55 0 12%,transparent 28%),radial-gradient(ellipse at 76% 62%,#6c97ff55 0 9%,transparent 22%),radial-gradient(ellipse at 40% 68%,#86aeff55 0 11%,transparent 26%),radial-gradient(ellipse at 94% 36%,#79a6ff55 0 9%,transparent 20%),radial-gradient(ellipse at 6% 64%,#86aeff55 0 8%,transparent 20%);background-size:200% 100%;background-repeat:repeat-x;opacity:.9;mask-image:radial-gradient(circle at 50% 50%,#000 40%,transparent 70%);animation:cx-map2 52s linear infinite}
.cx-lat{background-image:repeating-linear-gradient(0deg,#bcd3ff26 0 1px,transparent 1px calc(var(--w,700px) * .036)),repeating-linear-gradient(90deg,#bcd3ff22 0 1px,transparent 1px calc(var(--w,700px) * .03));mask-image:radial-gradient(circle at 50% 50%,#000 36%,transparent 70%);animation:cx-lon 34s linear infinite}
.cx-sweep{background:conic-gradient(from 0deg,transparent 0 72%,var(--cx-tone) 86%,transparent 100%);opacity:.35;mix-blend-mode:screen;animation:cx-spin 11s linear infinite;transition:opacity 1s}
.cx-gloss{background:radial-gradient(ellipse at 30% 22%,#ffffff66 0%,#ffffff18 22%,transparent 46%)}
.cx-night{background:linear-gradient(118deg,transparent 40%,#02061a99 70%,#02061af2 100%)}
.cx-atmo{position:absolute;z-index:1;inset:-3%;border-radius:50%;box-shadow:0 0 calc(var(--w,700px) * .035) calc(var(--w,700px) * .004) #6f94ff88,inset 0 0 calc(var(--w,700px) * .02) #9fbaff55;pointer-events:none}
.cx-globe-ring{position:absolute;z-index:1;left:50%;top:50%;width:160%;height:44%;border:1.5px solid #bcd3ff66;border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg);box-shadow:0 0 24px #7f9bff33;pointer-events:none}
.cx-globe-ring.cx-ring-front{z-index:4;clip-path:inset(50% 0 0 0);border-color:#dce8ffcc;box-shadow:0 0 18px #9fbaff55}
.cx-globe-ring.cx-ring-front::before{content:'';position:absolute;left:9%;top:76%;width:11px;height:11px;margin:-6px;border-radius:50%;background:#fff;box-shadow:0 0 14px #fff,0 0 30px var(--cx-tone);animation:cx-blink 2.6s ease-in-out infinite}
.cx-globe-text{position:relative;z-index:3;text-align:center;padding:0 10%;transform:translateY(-4%)}
.cx-globe-text small{display:block;font:700 calc(var(--w,700px) * .013)/1 'Manrope',sans-serif;letter-spacing:.24em;color:#cfe0ff;margin-bottom:.9em;text-shadow:0 1px 10px #000}
.cx-globe-text strong{display:block;font:800 calc(var(--w,700px) * .05)/1 'Manrope',sans-serif;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 18px #0a1538,0 0 40px #7f9bff88,0 0 2px #000}
.cx-globe-text span{display:block;margin-top:.9em;font-size:calc(var(--w,700px) * .016);line-height:1.5;color:#e1ebff;word-break:keep-all;text-shadow:0 1px 10px #000}
@keyframes cx-map{from{background-position:0 0}to{background-position:calc(var(--w,700px) * -.36) 0}}
@keyframes cx-map2{from{background-position:0 0}to{background-position:-200% 0}}
@keyframes cx-lon{from{background-position:0 0,0 0}to{background-position:0 0,calc(var(--w,700px) * -.3) 0}}
.cx-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);transform:rotate(var(--sa)) translateX(calc(var(--r) * .66)) translateZ(1px);opacity:.9;animation:cx-spark 5s linear infinite;animation-delay:var(--d,0s)}
@keyframes cx-spark{from{transform:rotate(var(--sa)) translateX(calc(var(--r) * .66)) translateZ(1px) scale(1);opacity:.9}to{transform:rotate(calc(var(--sa) + 360deg)) translateX(calc(var(--r) * .66)) translateZ(1px) scale(.6);opacity:.4}}
.cx-badge{position:absolute;z-index:6;white-space:nowrap;padding:.5em .95em;border-radius:999px;font:700 clamp(10px,.66vw,13px) 'Manrope',sans-serif;letter-spacing:.02em;color:#061127;background:#fff;box-shadow:0 10px 30px #0006;opacity:0;transform:translateZ(calc(var(--r,240px) * 1.1));animation:cx-badge 9s ease-in-out infinite;animation-delay:var(--d,0s)}
.cx-badge.cx-t{background:var(--cx-teal)}.cx-badge.cx-a{background:var(--cx-amber)}.cx-badge.cx-c{background:var(--cx-coral);color:#fff}
@keyframes cx-badge{0%,8%{opacity:0;transform:translateZ(calc(var(--r,240px) * 1.1)) translateY(8px)}12%,34%{opacity:1;transform:translateZ(calc(var(--r,240px) * 1.1))}40%,100%{opacity:0;transform:translateZ(calc(var(--r,240px) * 1.1)) translateY(-8px)}}
.cx-caption{position:absolute;right:0;bottom:-6px;margin:0;font-size:clamp(9px,.55vw,11px);color:#7f93b8;letter-spacing:.04em}
@keyframes cx-spin{to{transform:rotate(360deg)}}
@keyframes cx-blink{0%,100%{opacity:.35}50%{opacity:1}}
/* ---- 하단 띠·조작 ---- */
.cx-ticker{position:absolute;left:0;right:0;bottom:0;height:clamp(40px,2.6vw,54px);border-top:1px solid #ffffff14;background:#06102480;backdrop-filter:blur(8px);overflow:hidden;z-index:3;display:flex;align-items:center}
.cx-ticker-track{display:flex;gap:0;white-space:nowrap;animation:cx-ticker 52s linear infinite;will-change:transform}
.cx-ticker-track span{display:inline-flex;align-items:center;gap:14px;padding:0 18px;font:600 clamp(11px,.66vw,14px) 'Manrope','Noto Sans KR',sans-serif;letter-spacing:.08em;color:#b9c8e6}
.cx-ticker-track span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--cx-teal)}
.cx-ticker-track span:nth-child(3n)::after{background:var(--cx-amber)}.cx-ticker-track span:nth-child(3n+1)::after{background:var(--cx-coral)}
@keyframes cx-ticker{to{transform:translateX(-50%)}}
.cx-hero .renew-hero-bottom.cx-bottom{bottom:calc(clamp(40px,2.6vw,54px) + 14px);left:var(--cx-gutter);right:auto;justify-content:flex-start;gap:18px;z-index:4}
.cx-hero .renew-hero-bottom>span{color:#8fa3c7}
.cx-hero .renew-hero-controls button{width:40px;height:40px;border:1px solid #ffffff44;background:#ffffff14;color:#fff;font-size:13px}
.cx-hero .renew-hero-controls button:hover{background:#ffffff28}
.cx-hero.is-paused .cx-photo,.cx-hero.is-paused .cx-blob>i,.cx-hero.is-paused .cx-spot,.cx-hero.is-paused .cx-beam,.cx-hero.is-paused .cx-ring,.cx-hero.is-paused .cx-glow,.cx-hero.is-paused .cx-sphere>i,.cx-hero.is-paused .cx-floor::after,.cx-hero.is-paused .cx-face i,.cx-hero.is-paused .cx-img-b,.cx-hero.is-paused .cx-ring-front::before,.cx-hero.is-paused .cx-spark,.cx-hero.is-paused .cx-badge,.cx-hero.is-paused .cx-ticker-track,.cx-hero.is-paused .cx-dots li.is-on::after,.cx-hero.is-paused .cx-term-body p::after{animation-play-state:paused}
@keyframes cx-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* ---- 반응형 ---- */
@media(min-width:2200px){.cx-wrap{grid-template-columns:minmax(0,37fr) minmax(0,63fr)}}
@media(max-width:1100px){.cx-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:820px){
 .renew-hero.cx-hero{height:auto;min-height:0;max-height:none}
 .cx-hero .renew-slides,.cx-hero .renew-slide.cx-slide{position:relative;inset:auto}
 .cx-wrap{grid-template-columns:1fr;gap:18px;padding:84px 20px 150px;align-items:start}
 .cx-slogans{font-size:clamp(30px,8.2vw,40px);min-height:2.9em}.cx-lead{font-size:14px;line-height:1.8;min-height:0}.cx-term{max-width:none}
 .cx-stage{width:100%;max-width:600px;justify-self:center;margin-top:6px}.cx-scene{aspect-ratio:1/0.9}
 .cx-globe{width:calc(var(--w,700px) * .36)}.cx-badge{display:none}.cx-art{display:none}
 .cx-hero .renew-hero-bottom.cx-bottom{bottom:60px;left:20px}.cx-hero .renew-hero-bottom>span{display:none}
}
@media(prefers-reduced-motion:reduce){
 .cx-hero:not(.cx-force-motion) *,.cx-hero:not(.cx-force-motion) *::before,.cx-hero:not(.cx-force-motion) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition:none!important}
 .cx-hero:not(.cx-force-motion) .cx-card{opacity:1}.cx-hero:not(.cx-force-motion) .cx-ring{transform:rotateX(-16deg) rotateY(18deg)}.cx-hero:not(.cx-force-motion) .cx-badge{opacity:0}.cx-hero:not(.cx-force-motion) .cx-title.is-on{opacity:1;transform:none}.cx-hero:not(.cx-force-motion) .cx-spot,.cx-hero:not(.cx-force-motion) .cx-beam{display:none}.cx-hero:not(.cx-force-motion) .cx-img-b{opacity:0}
}
html[lang=en] .cx-slogans{min-height:3.5em;font-size:clamp(30px,2.9vw,68px)}html[lang=en] .cx-hero .cx-title{line-height:1.12}