/* 공통 기본 스타일 — 메인 제외 전 페이지(제품 상세 7 + 도입문의·오시는 길·개인정보) */
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:var(--kr);word-break:keep-all}
a{color:var(--blue);text-decoration:none}
.en{font-family:var(--en)}.mono{font-family:var(--mono)}
.wrap{max-width:var(--wrap);margin:0 auto}
.sec{padding:140px clamp(20px,5vw,64px)}
.eye{font:700 15px var(--en);color:var(--blue);letter-spacing:.02em}
.h2{margin:16px 0 0;font-size:clamp(32px,3.4vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.25;text-wrap:balance}
.lead{margin:22px 0 0;max-width:44em;font-size:18px;line-height:1.8;color:var(--ink2)}
@keyframes miIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dropIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes flow{to{stroke-dashoffset:-60}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* header (메인과 동일) */
.hd{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px;padding:0 max(clamp(20px,5vw,64px),calc((100% - var(--wrap)) / 2));background:transparent}
.hd .logo svg{fill:var(--ink)}
.nav{display:flex;gap:8px;align-self:stretch}
.navitem{position:relative;display:flex;align-items:stretch}
.navbtn{position:relative;display:flex;align-items:center;gap:8px;height:100%;min-height:44px;padding:0 26px;border:0;background:transparent;font-family:var(--en);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);cursor:pointer;transition:color .25s}
.navbtn:hover{color:var(--blue)}
.navbtn .chev{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.navbtn .uline{position:absolute;left:26px;right:26px;bottom:-1px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.navbtn[aria-expanded="true"]{color:var(--blue)}.navbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}.navbtn[aria-expanded="true"] .uline,.navbtn.cur .uline{transform:scaleX(1)}
.drop{position:absolute;top:100%;left:0;min-width:100%;width:max-content;white-space:nowrap;background:var(--blue);box-shadow:0 18px 40px rgba(2,6,15,.35);padding:10px 0;z-index:30}
.drop:not([hidden]){animation:dropIn .38s cubic-bezier(.2,.8,.2,1) both}
.drop a{display:block;padding:12px 16px;text-align:center;color:#FFFFFF;font:600 15px var(--en);opacity:0;animation:miIn .4s cubic-bezier(.2,.8,.2,1) forwards;transition:background .2s}
.drop a:hover,.drop a.on{background:rgba(255,255,255,.14)}
.drop a.on::after{content:" ●";font-size:8px;vertical-align:middle;color:var(--cyan)}
.hd-r{display:flex;gap:8px;align-items:center}
.btn-q{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:10px;background:var(--blue);color:#FFFFFF;font-size:14px;font-weight:700}
@media (max-width:900px){.nav{display:none}}
.sh-cv{position:absolute;inset:0;width:100%;height:100%}
.sh-in{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,96px);align-items:center}
.crumb{font:500 13px var(--en);color:var(--mute);display:flex;gap:10px;align-items:center}
.crumb a{color:var(--mute)}.crumb a:hover{color:var(--vio)}.crumb b{color:var(--ink);font-weight:600}
.sh-eye{margin-top:36px;font:700 15px var(--en);letter-spacing:.02em;color:var(--vio)}
.sh-h{margin:18px 0 0;font:700 clamp(40px,4.1vw,80px)/1.05 var(--en);letter-spacing:-.04em;white-space:nowrap}
.sh-h span{background:linear-gradient(90deg,var(--vio2),var(--vio) 45%,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.sh-sub{margin:24px 0 0;font-size:clamp(22px,1.8vw,30px);font-weight:700;color:var(--ink2);letter-spacing:-.02em;line-height:1.4}
.sh-p{margin:18px 0 0;max-width:36em;font-size:17px;line-height:1.85;color:var(--ink2)}
.badges{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap}
.trust{margin-top:22px;display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2)}
.trust b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#E6F9EF;color:#12A150;font-size:13px}
.sh-cta{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap}
.sh-cta a{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;font-size:15px;font-weight:700;transition:transform .3s,box-shadow .3s,background .3s}
.sh .rv{opacity:0;animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
@media (max-width:640px){.sh-h{white-space:normal}}

/* hero flow visual */
.flow{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:center}
.flow .lab{font:700 11px var(--en);letter-spacing:.08em;color:var(--mute);text-transform:uppercase}
.ph .lab{color:var(--vio)}
.ph .ttl{margin-top:10px;font-weight:800;font-size:14px}
.ph .dg{margin-top:14px;display:flex;gap:5px;justify-content:center}
@keyframes otpBar{from{width:100%}to{width:0}}
.pt .ok{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:12px;color:#12A150;font-weight:700;opacity:0;animation:okIn 6s ease infinite}
.dv .row b{font:700 12px var(--en)}.dv .row small{color:var(--mute);font-size:11px}
.dv .row em{font-style:normal;font:700 10.5px var(--en);color:#FFFFFF;background:var(--blue);padding:4px 8px;border-radius:5px;white-space:nowrap}
.arrow{position:absolute;top:50%;width:18px;height:2px;background:linear-gradient(90deg,var(--vio),var(--blue));right:-18px}
.arrow::after{content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid var(--blue);border-top:4px solid transparent;border-bottom:4px solid transparent}
.agent b{font:800 14px var(--en)}
.agent .scan{font:700 11px var(--en);color:#12A150;background:#E6F9EF;padding:4px 10px;border-radius:999px}

/* sections */
.k3{background:#FFFFFF;padding-block:90px}
.k3-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.k3c{display:flex;gap:20px;align-items:flex-start;padding:30px 32px;border:1px solid var(--line);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.k3c:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(11,18,32,.08)}
.k3c .ic svg{width:26px;height:26px}
.k3c h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em}.k3c p{margin:8px 0 0;font-size:15px;line-height:1.75;color:var(--ink2)}

.str{background:var(--vbg)}
.grp{margin-top:72px;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,2fr);gap:clamp(28px,3vw,56px);align-items:stretch}
.grp+.grp{margin-top:40px}
.gh{position:relative;padding:36px 32px;display:flex;flex-direction:column;overflow:hidden;color:#FFFFFF}
.gh .no{font:800 64px/1 var(--en);letter-spacing:-.04em;opacity:.22}
.gh .tg{margin-top:18px;font:700 12px var(--en);letter-spacing:.12em;opacity:.85}
.gh h3{margin:10px 0 0;font-size:clamp(22px,1.7vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.35}
.gh p{margin:12px 0 0;font-size:15px;line-height:1.7;color:rgba(255,255,255,.82)}
.gh .cnt{margin-top:auto;padding-top:28px;display:flex;gap:6px}
.gh::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 30px rgba(255,255,255,.04),0 0 0 60px rgba(255,255,255,.03)}
.gcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fx{display:flex;flex-direction:column;background:#FFFFFF;border:1px solid var(--line);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s,border-color .6s}
.fx .scene{position:relative;height:200px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.fx .txt{padding:24px 26px 28px}
.fx .n{font:800 13px var(--en);letter-spacing:.06em}
.grp.gsec .fx .n{color:var(--blue)}.grp.gcnv .fx .n{color:var(--vio)}
.fx h4{margin:8px 0 0;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.4}
.fx p{margin:8px 0 0;font-size:14.5px;line-height:1.7;color:var(--ink2)}
.fx .kw{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap}
.str .scn{animation-play-state:paused!important}
.s1 .nd.l{left:12%}.s1 .nd.r{right:12%}
.s1 .nd svg{width:24px;height:24px;color:var(--blue)}
.s1 .eve{position:absolute;left:50%;top:18px;margin-left:-16px;width:32px;height:32px;border-radius:50%;border:1px dashed rgba(229,72,77,.6);display:flex;align-items:center;justify-content:center;color:#E5484D;font:800 12px var(--en)}
.s1 .eve::after{content:"";position:absolute;top:34px;left:50%;width:1px;height:34px;border-left:1px dashed rgba(229,72,77,.5)}
.s1 .lb2{position:absolute;bottom:16px;left:0;right:0;text-align:center;font:700 11px var(--en);color:var(--blue2);letter-spacing:.04em}
.s2 .box b{font:800 11px var(--en);color:var(--blue2);letter-spacing:.06em}
.s2 .rnd{display:flex;gap:3px}
.s2 .lb2{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:700 11px var(--kr);color:var(--blue2)}
/* S3 industries hub */
.s3 svg{width:100%;height:100%}
.s3 .hub{fill:url(#hubG)}
.s3 .chip text{font:700 11px var(--kr);fill:var(--ink)}
.c1 .dg{margin-top:10px;display:flex;gap:4px}
.c2 .push b{display:block;color:var(--vio);font-size:8px}
.c2 .br .st{height:52px;display:flex;align-items:center;justify-content:center;font:700 10px var(--kr);color:var(--mute)}
.c2 .br .st span::before{content:"승인 대기 중"}
.c2 .lnk{position:absolute;left:calc(12% + 100px);right:calc(9% + 112px);top:50%;height:2px;background:repeating-linear-gradient(90deg,var(--vio) 0 6px,transparent 6px 12px);opacity:.5}
/* C3 device auto login */
.c3 .vd{position:absolute;left:10%;top:50%;margin-top:-52px;display:flex;flex-direction:column;gap:7px}
.c3 .key svg{width:12px;height:12px}
.c3 .lg b{display:block;font:700 9.5px var(--en);color:var(--mute)}
@media (max-width:1100px){.grp{grid-template-columns:1fr}}
@media (max-width:860px){.gcs{grid-template-columns:1fr}}
.how{background:#FFFFFF}
.flow4{position:relative;margin-top:72px}
.f4-track{position:absolute;left:calc((100% - 72px) / 8);right:calc((100% - 72px) / 8);top:27px;height:2px;background:var(--line)}
.f4-fill{position:absolute;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--vio),var(--blue));transition:width .9s cubic-bezier(.6,0,.2,1)}
.f4{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.f4s{display:flex;flex-direction:column;align-items:stretch}
.f4s .dot{align-self:center;position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:#FFFFFF;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font:800 17px var(--en);color:var(--mute);transition:all .5s}
.f4s.done .dot{border-color:var(--vio);color:var(--vio)}
.f4s .stl{margin-top:16px;text-align:center;font:700 12px var(--en);letter-spacing:.08em;color:var(--mute);transition:color .4s}
.f4s.on .stl,.f4s.done .stl{color:var(--vio)}
.f4c{margin-top:22px;flex:1;display:flex;flex-direction:column;background:#FFFFFF;border:1px solid var(--line);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s,border-color .6s}
.f4c .txt{padding:24px 26px 28px}
.f4c h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.f4c p{margin:8px 0 0;font-size:15px;line-height:1.7;color:var(--ink2)}
.m-win .lb{font:700 10px var(--en);letter-spacing:.06em;color:var(--mute)}
.m-fld .tp{display:inline-block;overflow:hidden;white-space:nowrap;width:0;vertical-align:bottom}
.f4s.done .m-fld .tp{width:9ch}
.m-ph .t{font:800 8.5px var(--kr);color:var(--vio2)}
.m-ph .dg{margin-top:10px;display:flex;gap:2px;justify-content:center}
/* scene 3: device list */
.m-list{width:76%;display:flex;flex-direction:column;gap:7px}
.m-row small{margin-left:auto;font:600 10px var(--kr);color:var(--mute)}
.m-row .ck{width:14px;height:14px;border-radius:4px;border:1.5px solid #CBD2E1;display:flex;align-items:center;justify-content:center;transition:all .3s}
.m-row.lock{opacity:.45}.m-row.lock small{color:#E5484D}
.f4s.on .m-row.sel .ck,.f4s.done .m-row.sel .ck{background:var(--vio);border-color:var(--vio);transition-delay:.5s}
.m-row .ck svg{opacity:0;transition:opacity .2s .7s}.f4s.on .m-row.sel .ck svg,.f4s.done .m-row.sel .ck svg{opacity:1}
.m-br .pg{position:relative;height:86px;padding:10px}
.m-br .lg{display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center}
.m-br .lg em{font:700 9.5px var(--kr);font-style:normal;color:#12A150}
.m-br .db{opacity:0;display:grid;grid-template-columns:28% 1fr;gap:8px}
.m-br .db .sd{background:linear-gradient(180deg,#EDE8FF,#DCD3FF);border-radius:4px}
.m-br .db .ch{display:flex;align-items:flex-end;gap:5px;padding:6px;background:#F7F8FC;border-radius:4px}
.m-badge{position:absolute;right:10%;top:16px;font:700 10px var(--kr);color:#FFFFFF;background:#12A150;padding:4px 9px;border-radius:999px;opacity:0;transform:translateY(-6px);transition:all .4s}
.f4s.on .m-badge,.f4s.done .m-badge{opacity:1;transform:none;transition-delay:1.6s}
.f4-ctrl{margin-top:28px;display:flex;justify-content:center;gap:8px}
.f4-ctrl button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:#D9DDE8;cursor:pointer;transition:all .3s}
@media (max-width:1100px){.f4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.f4-track{display:none}}
@media (max-width:640px){.f4{grid-template-columns:1fr}}
.admsec{background:var(--vbg)}
.adm-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.adm-hd .lead{margin:0;max-width:30em}
.adm-g{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ac{padding:36px;border:1px solid var(--line);background:#FFFFFF;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s}
.aic2 svg{width:26px;height:26px}.ac p{margin:10px 0 0;font-size:15px;line-height:1.75;color:var(--ink2)}
.ai{position:relative;overflow:hidden;background:linear-gradient(135deg,#5A3CF0 0%,#3F2BC9 55%,#2343D9 100%);color:#FFFFFF}
.ai .eye{color:#D9D1FF}.ai .lead{color:rgba(255,255,255,.82)}
.ai-cv{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.ai-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.opt{display:inline-flex;margin-left:12px;vertical-align:middle;font:700 12px var(--en);padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.5);color:#FFFFFF}
.ai-g{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.aic{padding:26px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);transition:background .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.aic:hover{background:rgba(255,255,255,.18);transform:translateY(-4px)}.aic p{margin:8px 0 0;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.82)}
.chat{background:#FFFFFF;color:var(--ink);box-shadow:0 40px 90px rgba(10,6,60,.35);overflow:hidden}
.chat .top{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);font:700 14px var(--en)}
.chat .top small{margin-left:auto;font:600 11px var(--en);color:var(--mute)}
.chat .body{padding:24px 20px;display:flex;flex-direction:column;gap:14px;min-height:300px}
.msg{max-width:86%;padding:14px 16px;font-size:14.5px;line-height:1.65;border-radius:14px}
.msg.a .tag{display:block;margin-bottom:6px;font:700 11px var(--en);color:var(--vio)}
.typing{display:inline-flex;gap:4px}
.chat .note{padding:12px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 18px}

.scr{background:var(--vbg)}
.tabs{margin-top:48px;display:flex;gap:8px;flex-wrap:wrap}
.gal{margin-top:28px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr);gap:28px;align-items:start}
.frame{background:#FFFFFF;border:1px solid var(--line);box-shadow:0 30px 70px rgba(11,18,32,.10)}
.frame .vw{position:relative;background:#0B1220;aspect-ratio:1600/1240;overflow:hidden}
.frame .vw img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.02);transition:opacity .6s,transform .9s cubic-bezier(.2,.8,.2,1)}
.cap .stp{font:700 13px var(--en);color:var(--vio)}
.cap h3{margin:10px 0 0;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.4}
.cap p{margin:12px 0 0;font-size:15.5px;line-height:1.8;color:var(--ink2)}
.cap ol{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.cap li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;font-size:14.5px;line-height:1.65;color:var(--ink2)}
.cap li b{color:var(--ink)}
.thumbs{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.ctr{margin-top:20px;display:flex;gap:10px}

.ind{background:#FFFFFF;padding-block:100px}
.ind-in{display:flex;justify-content:space-between;gap:32px;align-items:center;flex-wrap:wrap}
.ind-l h2{margin:12px 0 0;font-size:clamp(26px,2.4vw,38px);font-weight:800;letter-spacing:-.02em}
.ind-c{display:flex;gap:12px;flex-wrap:wrap}

.rel{background:var(--vbg)}
.rel-g{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.rc{display:flex;flex-direction:column;gap:10px;padding:32px;border:1px solid var(--line);background:#FFFFFF;color:var(--ink);transition:background .4s,color .4s,border-color .4s}
.rc em{margin-top:auto;padding-top:18px;font:600 13px var(--en);font-style:normal;color:var(--blue);transition:color .4s}
.rc:hover{background:var(--blue);border-color:var(--blue);color:#FFFFFF}.rc:hover em{color:#FFFFFF}

.pre .rvs{opacity:0;transform:translateY(40px)}
.rvs{transition:opacity 1s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform 1s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
@media (max-width:1100px){.sh-in,.ai-in,.gal{grid-template-columns:1fr}.k3-g,.str-g{grid-template-columns:1fr}.rel-g,.adm-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sec{padding-block:96px}.flow{grid-template-columns:1fr}.arrow{display:none}.rel-g,.adm-g,.ai-g{grid-template-columns:1fr}}
.nav-menu:has(.navbtn[aria-expanded="true"]) .navbtn.cur:not([aria-expanded="true"]) .uline,.nav:has(.navbtn[aria-expanded="true"]) .navbtn.cur:not([aria-expanded="true"]) .uline{transform:scaleX(0)}
/* Core Strengths 두 페이지 높이 통일 */
.str .lead{white-space:nowrap}
.fx .txt{min-height:252px;box-sizing:border-box}
.fx h4{min-height:2.8em}
@media (max-width:1100px){.str .lead{white-space:normal}.fx .txt{min-height:0}}

/* v3.33 header scale & align */
header.fi-hero,.hd{height:clamp(76px,4.6vw,100px)!important}
header.fi-hero .navbtn,.hd .navbtn{font-size:clamp(18px,1.06vw,22px)!important;padding:0 clamp(22px,1.6vw,34px)!important;gap:10px!important}
header.fi-hero .navbtn .chev,.hd .navbtn .chev{width:clamp(12px,.7vw,14px);height:clamp(12px,.7vw,14px)}
header.fi-hero .navbtn .uline,.hd .navbtn .uline{left:clamp(22px,1.6vw,34px)!important;right:clamp(22px,1.6vw,34px)!important}
header.fi-hero>nav,.hd>.nav{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%)}
header.fi-hero>div:last-child,.hd .hd-r{gap:clamp(8px,.6vw,14px)!important}
header.fi-hero>div:last-child>a.en,.hd .hd-r .en{font-size:clamp(13px,.8vw,15.5px)!important;font-weight:600}
header.fi-hero>div:last-child>a:last-child,.hd .hd-r .btn-q{min-height:clamp(44px,2.5vw,52px)!important;padding:0 clamp(20px,1.3vw,28px)!important;font-size:clamp(14px,.86vw,16.5px)!important}