/* 솔루션 페이지 (전문형) — 분야 색: --c 메인 / --c2 연한 / --g 그라데이션 끝 */
.sp{--ease:cubic-bezier(.2,.75,.2,1);--navy:#0F1E45;font-family:var(--font);color:#14234B;word-break:keep-all}
.sp *,.sp *::before,.sp *::after{box-sizing:border-box}
.sp h1,.sp h2,.sp h3,.sp h4,.sp p{margin:0}
.sp .w{width:min(1200px,calc(100% - 64px));margin:0 auto}
.sp em{font-style:normal;background:linear-gradient(100deg,var(--c),var(--g));-webkit-background-clip:text;background-clip:text;color:transparent}
.sp .k{font-size:12.5px;font-weight:800;letter-spacing:.24em;color:var(--c)}
.sp svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sp .ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:none;background:linear-gradient(145deg,#fff,var(--c2));color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 14%,#fff),0 6px 14px color-mix(in srgb,var(--c) 14%,transparent)}
.sp .ic.f{background:linear-gradient(135deg,var(--c),var(--g));color:#fff;box-shadow:0 10px 20px color-mix(in srgb,var(--c) 30%,transparent)}
.sp .ic.n{background:linear-gradient(135deg,#0F1E45,#3B3D9E);color:#fff;box-shadow:0 10px 20px rgba(15,30,69,.25)}
.sp .ic.s{width:38px;height:38px;border-radius:11px}.sp .ic.s svg.i{width:18px;height:18px}
.sp .card{background:rgba(255,255,255,.95);border:1px solid #E4EBF8;border-radius:24px;box-shadow:0 14px 36px rgba(40,70,160,.09);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.sp .card.h:hover{transform:translateY(-6px);box-shadow:0 26px 52px rgba(40,70,160,.16);border-color:color-mix(in srgb,var(--c) 30%,#E4EBF8)}
.sp .card.h:hover .ic{transform:rotate(-6deg) scale(1.06)}
.sp .ic{transition:transform .45s var(--ease)}
.sp .sec{margin-top:96px}
.sp .sh{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:30px}
.sp .sh h2{margin-top:10px;font-size:clamp(28px,3vw,36px);letter-spacing:-.05em}
.sp .sh>p{max-width:430px;color:#5F6C94;font-size:15px;line-height:1.75;text-align:right}
.sp .note{display:inline-block;font-size:10.5px;color:#8C9BC8;font-weight:600}
/* hero */
.sp-hero{position:relative;padding:40px 0 10px}
.sp-hero::before{content:"";position:absolute;inset:-60px -60px 0;background-image:linear-gradient(rgba(70,110,220,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(70,110,220,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask:radial-gradient(ellipse at 72% 40%,#000 15%,transparent 65%);mask:radial-gradient(ellipse at 72% 40%,#000 15%,transparent 65%);pointer-events:none}
.sp .crumb{position:relative;font-size:13px;color:#7A8AA6;margin-bottom:26px}.sp .crumb a{color:inherit;text-decoration:none}.sp .crumb b{color:#14234B}
.sp-hg{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
.sp .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:99px;background:#fff;border:1px solid color-mix(in srgb,var(--c) 22%,#fff);font-size:12.5px;font-weight:800;color:var(--c);box-shadow:0 6px 16px color-mix(in srgb,var(--c) 12%,transparent)}
.sp .pill b{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;background:#0F1E45;color:#fff;font-size:11px}
.sp .pill b svg.i{width:12px;height:12px}
.sp-hero h1{margin-top:18px;font-size:clamp(32px,3.4vw,42px);line-height:1.26;letter-spacing:-.05em}
.sp .lead{margin-top:18px;font-size:16.5px;line-height:1.85;color:#4D5E84}
.sp .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}
.sp .keys>div{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:rgba(255,255,255,.88);border:1px solid #E4EBF8;font-size:13px;font-weight:800;line-height:1.3}
.sp .keys small{display:block;font-size:11.5px;color:#7A8AA6;font-weight:600;margin-top:2px}
.sp .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sp .btn{display:inline-flex;align-items:center;gap:8px;padding:15px 24px;border-radius:14px;font-size:14.5px;font-weight:800;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--c),var(--g));box-shadow:0 14px 28px color-mix(in srgb,var(--c) 30%,transparent);transition:transform .3s var(--ease),box-shadow .3s}
.sp .btn:hover{transform:translateY(-3px)}
.sp .btn.g{background:#fff;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 22%,#fff);box-shadow:none}
.sp-vis{position:relative}
.sp-vis .float{animation:spFloat 7s ease-in-out infinite}
@keyframes spFloat{50%{transform:translateY(-10px)}}
.sp .shot{border-radius:26px;overflow:hidden;border:6px solid #fff;box-shadow:0 34px 80px rgba(30,60,160,.22);background:var(--c2)}
.sp .shot img{display:block;width:100%;aspect-ratio:1.3;object-fit:cover}
.sp .fl{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 16px 34px rgba(30,50,140,.2);font-size:12.5px;font-weight:800;animation:spFloat 6s ease-in-out infinite}
.sp .fl:nth-of-type(2n){animation-delay:-3s}
.sp .fl small{display:block;font-size:11px;color:#7A8AA6;font-weight:600}
.sp .fl .ic{width:36px;height:36px;border-radius:11px}.sp .fl svg.i{width:18px;height:18px}
.sp .fl img{width:40px;height:54px;object-fit:cover;border-radius:4px;box-shadow:0 4px 10px rgba(30,50,140,.2)}
.sp .ring{--p:87;width:42px;height:42px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),#E6EDFB 0);display:grid;place-items:center}
.sp .ring span{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:10px;font-weight:900;color:var(--c)}
/* console (화면 예시) */
.sp .con{border-radius:24px;background:#fff;border:1px solid #E4EBF8;box-shadow:0 34px 80px rgba(30,60,160,.2);overflow:hidden}
.sp .con .bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#F7F9FE;border-bottom:1px solid #EDF1F9;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:#8A98BC}
.sp .con .bar i{width:10px;height:10px;border-radius:50%;background:#E3E9F7}.sp .con .bar i:first-child{background:var(--c)}
.sp .con .bar span{margin-left:8px}.sp .con .bar .live{margin-left:auto;padding:3px 10px;border-radius:99px;background:#E7F8EF;color:#1B9A5E;letter-spacing:0}
.sp .cg{display:grid;grid-template-columns:150px 1fr;min-height:330px}
.sp .side{padding:14px 10px;background:#FBFCFF;border-right:1px solid #EDF1F9}
.sp .side small{display:block;margin:4px 10px 8px;font-size:10px;font-weight:900;letter-spacing:.14em;color:#AAB4D0}
.sp .side div{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:11px;font-size:12px;font-weight:800;color:#5B6A90}
.sp .side div svg.i{width:15px;height:15px}
.sp .side div.on{background:var(--c2);color:var(--c)}
.sp .main{padding:18px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#fff,#FAFBFF)}
.sp .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sp .kpi{padding:12px;border-radius:14px;background:#F6F8FE;border:1px solid #EDF1F9}
.sp .kpi small{display:block;font-size:10.5px;font-weight:800;color:#8A98BC}
.sp .kpi b{display:block;margin-top:4px;font-size:20px;font-weight:900;color:#14234B;letter-spacing:-.03em}
.sp .kpi b.c{color:var(--c)}
.sp .chart{position:relative;height:92px;border-radius:14px;background:#F6F8FE;border:1px solid #EDF1F9;padding:10px;display:flex;align-items:flex-end;gap:6px}
.sp .chart i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 25%,#fff));transform-origin:bottom;animation:spGrow 1.4s var(--ease) both}
.sp .chart i:nth-child(2){animation-delay:.08s}.sp .chart i:nth-child(3){animation-delay:.16s}.sp .chart i:nth-child(4){animation-delay:.24s}.sp .chart i:nth-child(5){animation-delay:.32s}.sp .chart i:nth-child(6){animation-delay:.4s}.sp .chart i:nth-child(7){animation-delay:.48s}.sp .chart i:nth-child(8){animation-delay:.56s}
@keyframes spGrow{from{transform:scaleY(0)}}
.sp .rows div{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid #EDF1F9;font-size:11.5px;font-weight:800;color:#3C4C78;margin-top:6px}
.sp .rows .t{padding:2px 8px;border-radius:99px;font-size:10px;background:#E7F8EF;color:#1B9A5E}
.sp .rows .t.b{background:var(--c2);color:var(--c)}
/* trust */
.sp .trust{display:grid;grid-template-columns:repeat(3,1fr) 1.15fr;margin-top:48px;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.92);border:1px solid #E4EBF8;box-shadow:0 14px 36px rgba(40,70,160,.08)}
.sp .trust>div{padding:24px;display:flex;gap:14px;align-items:flex-start}
.sp .trust>div+div{border-left:1px solid #EDF1F9}
.sp .trust b{display:block;font-size:15.5px}.sp .trust small{display:block;margin-top:4px;font-size:13px;color:#6A7A9C;line-height:1.55}
.sp .trust .dk{background:linear-gradient(135deg,#0F1E45,#22377A);color:#fff;align-items:center}
.sp .trust .dk small{color:#B8C5EA}.sp .trust .dk img{width:46px;height:62px;border-radius:4px;object-fit:cover;box-shadow:0 6px 14px rgba(0,0,0,.3)}
/* bento */
.sp .bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px}
.sp .bx{padding:26px;position:relative}
.sp .bx h3{margin-top:16px;font-size:19px;letter-spacing:-.03em}.sp .bx p{margin-top:8px;font-size:14px;line-height:1.7;color:#5A6C90}
.sp .bx.dk{grid-row:span 2;background:linear-gradient(160deg,#0F1E45,#22377A 60%,#3B3D9E);color:#fff;border:0;overflow:hidden}
.sp .bx.dk::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--g) 60%,transparent),transparent)}
.sp .bx.dk .tag{position:relative;display:inline-flex;gap:6px;align-items:center;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:11.5px;font-weight:800;letter-spacing:.1em}
.sp .bx.dk .tag svg.i{width:14px;height:14px}
.sp .bx.dk h3{position:relative;font-size:25px;margin-top:18px}.sp .bx.dk p{position:relative;color:#C3CDEE;max-width:400px}
.sp .bx.dk .note{color:#8C9BC8;margin-top:12px}
.sp .dpanel{position:relative;margin-top:22px;padding:16px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.sp .dm{font-size:12px;font-weight:700;color:#C3CDEE;display:flex;justify-content:space-between;margin-top:9px}.sp .dm b{color:#fff}
.sp .dbar{height:7px;border-radius:7px;background:rgba(255,255,255,.12);margin-top:5px;overflow:hidden}.sp .dbar i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#6FE3C1,#5C8CFF);transform-origin:left;animation:spBar 1.6s var(--ease) both .3s}
@keyframes spBar{from{transform:scaleX(0)}}
.sp .dlist{display:grid;gap:8px;margin-top:4px}
.sp .dlist div{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.08);font-size:13px;font-weight:700;color:#E3E9FF}
.sp .dlist div svg.i{width:17px;height:17px;color:#9FB6FF}
.sp .road{display:flex;align-items:center;margin-top:16px}
.sp .road span{flex:1;text-align:center;font-size:11.5px;font-weight:800;color:#AFC0EE;position:relative;padding-top:20px}
.sp .road span::before{content:"";position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#2A3F8E;border:2px solid #5C6FB8;z-index:1}
.sp .road span::after{content:"";position:absolute;left:50%;right:-50%;top:5px;height:2px;background:#3A4C92}
.sp .road span:last-child::after{display:none}
.sp .road span.d::before{background:#6FE3C1;border-color:#6FE3C1}.sp .road span.on{color:#fff}.sp .road span.on::before{background:#5C8CFF;border-color:#fff;box-shadow:0 0 0 5px rgba(92,140,255,.3)}
.sp .face{position:relative;height:120px;border-radius:16px;background:linear-gradient(160deg,#2A3F8E,#1A2A62);display:grid;place-items:center}
.sp .face svg.i{width:54px;height:54px;color:#9FB6FF}
.sp .face::before,.sp .face::after{content:"";position:absolute;width:22px;height:22px;border:2.5px solid #6FE3C1}
.sp .face::before{left:10px;top:10px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}.sp .face::after{right:10px;bottom:10px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.sp .face i{position:absolute;left:14px;right:14px;height:2px;background:linear-gradient(90deg,transparent,#6FE3C1,transparent);animation:spScan 2.6s ease-in-out infinite}
@keyframes spScan{0%,100%{top:22%}50%{top:78%}}
.sp .scan{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.sp .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sp .chips span{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:9px;background:color-mix(in srgb,var(--c2) 60%,#fff);border:1px solid color-mix(in srgb,var(--c) 12%,#fff);font-size:12px;font-weight:700;color:#3A538F}
.sp .chips span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c)}
.sp .mbar{display:flex;align-items:flex-end;gap:6px;margin-top:16px;height:54px}
.sp .mbar i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 20%,#fff));transform-origin:bottom;animation:spGrow 1.4s var(--ease) both}
.sp .tiles2{display:flex;gap:8px;margin-top:16px}.sp .tiles2>div{flex:1;padding:10px;border-radius:12px;background:#F6F8FE;border:1px solid #E4EBF8;font-size:12px;font-weight:800;text-align:center}.sp .tiles2 small{display:block;font-size:10.5px;color:#8A98BC;font-weight:600;margin-top:2px}
.sp .tiles2>div.on{background:var(--c);color:#fff;border-color:var(--c)}.sp .tiles2>div.on small{color:rgba(255,255,255,.85)}
/* pipeline */
.sp .pipe{padding:32px 30px 28px}
.sp .pl{display:flex;align-items:stretch}
.sp .nd{flex:1;position:relative;padding:18px 14px;border-radius:20px;background:#fff;border:1.5px solid #ECEFF8;box-shadow:0 10px 24px rgba(80,105,200,.1);text-align:center}
.sp .nd .ic{margin:0 auto}
.sp .nd .st{display:block;margin-top:10px;font-size:10.5px;font-weight:900;letter-spacing:.14em;color:var(--c)}
.sp .nd h4{margin-top:4px;font-size:15.5px}.sp .nd p{margin-top:6px;font-size:12.5px;color:#6A7A9C;line-height:1.55}
.sp .nd.core{background:linear-gradient(150deg,var(--c),var(--g));color:#fff;border-color:transparent;box-shadow:0 20px 44px color-mix(in srgb,var(--c) 35%,transparent)}
.sp .nd.core p,.sp .nd.core .st{color:rgba(255,255,255,.9)}.sp .nd.core .ic{background:rgba(255,255,255,.22);color:#fff;box-shadow:none}
.sp .arr{flex:0 0 46px;align-self:center;position:relative;height:3px;margin:0 6px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--c) 45%,#fff) 0 8px,transparent 8px 14px)}
.sp .arr::after{content:"";position:absolute;right:-4px;top:-5px;border:6.5px solid transparent;border-left:9px solid var(--c)}
.sp .arr i{position:absolute;top:-4px;left:0;width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent);animation:spDot 2.2s linear infinite}
@keyframes spDot{from{left:0}to{left:calc(100% - 11px)}}
.sp .subs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.sp .subs div{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--c2) 45%,#fff);font-size:13px;font-weight:700;color:#3C4C78}
.sp .subs svg.i{width:18px;height:18px;color:var(--c)}
/* benefits */
.sp .ben{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:16px}
.sp .bc{padding:26px;position:relative;overflow:hidden}
.sp .bc .no{position:absolute;right:20px;top:14px;font-size:48px;font-weight:900;letter-spacing:-.04em;color:var(--c);opacity:.12}
.sp .bc h3{margin-top:16px;font-size:18px}.sp .bc p{margin-top:8px;font-size:14px;line-height:1.65;color:#5A6C90}
/* architecture */
.sp .arch{padding:30px 32px}
.sp .lay{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:center}
.sp .lay+.lay{margin-top:16px;position:relative}
.sp .lay+.lay::before{content:"";position:absolute;left:89px;top:-16px;width:2px;height:16px;background:repeating-linear-gradient(180deg,var(--c) 0 3px,transparent 3px 6px)}
.sp .lay .lb{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:16px;background:linear-gradient(135deg,#0F1E45,#2A3F8E);color:#fff;font-size:13.5px;font-weight:800}
.sp .lay .lb svg.i{width:18px;height:18px;color:#9FB6FF}
.sp .lay .ch{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--c2) 55%,#fff);border:1px dashed color-mix(in srgb,var(--c) 22%,#fff)}
.sp .lay .ch span{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:11px;background:#fff;font-size:13px;font-weight:700;color:#33456F;box-shadow:0 4px 10px rgba(40,60,140,.06)}
.sp .lay .ch span::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--c)}
/* features (아이콘 목록형) */
.sp .fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sp .panel{padding:0;overflow:hidden}
.sp .ph{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid #EDF1F9}
.sp .ph h3{font-size:19px}.sp .ph small{display:block;font-size:12.5px;color:#7A8AA6;margin-top:2px}
.sp .ph .cnt{margin-left:auto;padding:5px 11px;border-radius:99px;background:var(--c2);color:var(--c);font-size:12px;font-weight:800}
.sp .scr{margin:18px 24px 6px;border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--c2) 50%,#fff),#fff);border:1px solid #E4EBF8;padding:14px}
.sp .fl4{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:8px 24px 22px}
.sp .fi{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #F0F3FA}
.sp .fl4 .fi:nth-last-child(-n+2){border-bottom:0}
.sp .fi b{display:block;font-size:15px}.sp .fi small{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:#6A7A9C}
.sp .fcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sp .fcards.c3{grid-template-columns:repeat(3,1fr)}
.sp .fc{padding:22px}
.sp .fc .top{display:flex;justify-content:space-between;align-items:center}
.sp .fc .num{font-size:11.5px;font-weight:900;letter-spacing:.1em;color:#AAB4D0}
.sp .fc h3{margin-top:16px;font-size:16.5px}.sp .fc p{margin-top:7px;font-size:13.5px;line-height:1.65;color:#5A6C90}
/* table/lrow mini screens */
.sp .lrow{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:9px 0}
.sp .lrow+.lrow{border-top:1px dashed #E1E8F6}
.sp .th{height:34px;border-radius:9px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 35%,#fff),#DCD3FF);display:grid;place-items:center}
.sp .th svg{width:14px;height:14px;fill:#fff}
.sp .lrow b{font-size:12.5px}.sp .pb{height:6px;border-radius:6px;background:#E6EDFB;margin-top:6px;overflow:hidden}.sp .pb i{display:block;height:100%;background:linear-gradient(90deg,var(--c),var(--g))}
.sp .tag2{font-size:11px;font-weight:800;padding:3px 8px;border-radius:99px;background:#E7F8EF;color:#1B9A5E}.sp .tag2.b{background:var(--c2);color:var(--c)}
.sp .tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.sp .tbl th{text-align:left;color:#8A98BC;font-weight:800;padding:0 6px 8px}
.sp .tbl td{padding:8px 6px;border-top:1px dashed #E1E8F6;font-weight:700;color:#33456F}
.sp .tbl .av{display:inline-block;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,#fff),#DCD3FF);vertical-align:middle;margin-right:6px}
/* add-on */
.sp .add{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sp .ad{overflow:hidden}
.sp .ad .vz{height:170px;padding:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--c2) 60%,#fff),#F6F3FF);border-bottom:1px solid #EDF1F9}
.sp .ad .bd{padding:20px 22px 24px}.sp .ad .hd{display:flex;align-items:center;gap:12px}
.sp .ad h3{font-size:18px}.sp .ad h3 small{display:block;font-size:12px;font-weight:700;color:#7A8AA6;margin-top:2px}
.sp ul.ck{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.sp ul.ck li{display:flex;gap:8px;font-size:13.5px;line-height:1.55;color:#33456F}
.sp ul.ck li::before{content:"✓";flex:none;display:grid;place-items:center;width:17px;height:17px;margin-top:2px;border-radius:5px;background:var(--c2);color:var(--c);font-size:10.5px;font-weight:900}
.sp .sites{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;height:100%}
.sp .site{border-radius:12px;background:#fff;border:1px solid #E1E8F6;box-shadow:0 8px 16px rgba(40,70,160,.08);padding:8px;display:flex;flex-direction:column;gap:5px}
.sp .site .tb{display:flex;gap:3px}.sp .site .tb i{width:5px;height:5px;border-radius:50%;background:#D5DEF2}
.sp .site .hd2{height:26px;border-radius:6px;background:var(--x)}.sp .site .ln{height:5px;border-radius:3px;background:#EDF1F9}.sp .site .ln.s{width:60%}
.sp .site b{font-size:10.5px;text-align:center;color:#4C5F95;margin-top:auto}
.sp .kan{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:100%}
.sp .col{border-radius:12px;background:rgba(255,255,255,.75);border:1px solid #E1E8F6;padding:8px;display:flex;flex-direction:column;gap:6px}
.sp .col b{font-size:10.5px;color:#4C5F95;display:flex;justify-content:space-between}.sp .col b span{color:#8A98BC}
.sp .tk{height:24px;border-radius:7px;background:#fff;box-shadow:0 3px 8px rgba(40,70,160,.08);border-left:3px solid var(--x)}
.sp .hr{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;height:100%}
.sp .hr svg{width:120px;height:120px}
.sp .hr .ls div{display:flex;justify-content:space-between;font-size:11px;font-weight:800;color:#4C5F95;margin-top:7px}
/* tiles (콘텐츠 제작기법 등) */
.sp .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sp .ty{padding:20px;display:flex;align-items:center;gap:14px}
.sp .ty b{display:block;font-size:15.5px}.sp .ty small{display:block;font-size:11px;font-weight:900;letter-spacing:.1em;color:#AAB4D0;margin-top:3px}
/* cases */
.sp .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sp .cs{padding:24px}.sp .cs .top{display:flex;justify-content:space-between;align-items:center}
.sp .cs .tg{font-size:11.5px;font-weight:800;color:var(--c);background:var(--c2);padding:4px 10px;border-radius:99px}
.sp .cs h3{margin-top:16px;font-size:18px}.sp .cs p{margin-top:7px;font-size:14px;color:#5A6C90;line-height:1.6}
/* chat (AI) */
.sp .u{align-self:flex-end;max-width:80%;padding:10px 14px;border-radius:16px 16px 4px 16px;background:linear-gradient(135deg,var(--c),var(--g));color:#fff;font-size:12.5px;font-weight:600}
.sp .a{max-width:90%;padding:12px 14px;border-radius:16px 16px 16px 4px;background:#fff;border:1px solid #ECE8F8;font-size:12.5px;line-height:1.65;color:#22345E;box-shadow:0 8px 18px rgba(80,70,180,.08)}
.sp .a .it{display:inline-block;margin-bottom:6px;font-size:10px;font-weight:900;color:var(--c);background:var(--c2);padding:2px 8px;border-radius:99px}
.sp .src{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sp .src span{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:8px;background:#F4F6FC;border:1px solid #E5EAF6;font-size:10.5px;font-weight:700;color:#4C5F95}
.sp .src span::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--c)}
.sp .inp{margin-top:auto;display:flex;align-items:center;padding:7px 7px 7px 14px;border-radius:99px;border:1.5px solid #ECE8F8;background:#fff;font-size:12px;color:#A0AAC6}
.sp .inp i{margin-left:auto;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--c),var(--g))}
.sp .bub{margin-top:14px;padding:10px 12px;border-radius:12px 12px 12px 4px;background:#F5F6FC;font-size:12.5px;color:#3C4C78;line-height:1.5}
.sp .bub small{display:block;font-size:10px;font-weight:900;color:#AAB4D0;letter-spacing:.1em;margin-bottom:3px}
.sp .code{font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.7;padding:12px;border-radius:12px;background:#1C2240;color:#C9D3FF}
.sp .code b{color:#FF9EC1;font-weight:600}.sp .code i{color:#9FE0C8;font-style:normal}
.sp .flowx{display:flex;align-items:center;gap:8px;margin-top:20px}
.sp .flowx div{flex:1;padding:12px 10px;border-radius:14px;background:#fff;border:1.5px solid #ECEFF8;text-align:center;font-size:12.5px;font-weight:800;color:#33456F}
.sp .flowx div small{display:block;font-size:10.5px;color:#8A98BC;font-weight:700;margin-top:2px}
.sp .flowx div.h{background:linear-gradient(135deg,var(--c),var(--g));color:#fff;border-color:transparent}.sp .flowx div.h small{color:rgba(255,255,255,.85)}
.sp .flowx span{color:var(--c);font-weight:900}
/* cta */
.sp .cta{margin:100px 0 90px;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:42px 46px;border-radius:30px;background:linear-gradient(120deg,#0F1E45,#22377A 55%,#3B3D9E);color:#fff;box-shadow:0 26px 56px rgba(20,30,90,.3)}
.sp .cta::before{content:"";position:absolute;right:140px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--g) 50%,transparent),transparent)}
.sp .cta .k{color:#9FB6FF}.sp .cta h2{position:relative;margin-top:10px;font-size:27px;letter-spacing:-.04em}.sp .cta p{position:relative;margin-top:10px;color:#C3CDEE}
.sp .cta .b2{position:relative;display:flex;gap:10px}
.sp .cta a{padding:15px 24px;border-radius:14px;background:#fff;color:#1E3F9E;font-weight:800;text-decoration:none;transition:transform .3s}
.sp .cta a:hover{transform:translateY(-3px)}
.sp .cta a.o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
@media(max-width:1060px){
 .sp-hg{grid-template-columns:1fr}.sp .trust{grid-template-columns:1fr 1fr}.sp .trust>div:nth-child(3){border-left:0}
 .sp .bento{grid-template-columns:1fr 1fr}.sp .bx.dk{grid-column:1/-1;grid-row:auto}
 .sp .fgrid,.sp .add,.sp .cases{grid-template-columns:1fr}.sp .fcards,.sp .tiles{grid-template-columns:repeat(2,1fr)}
 .sp .ben{grid-template-columns:repeat(2,1fr)}.sp .pl{flex-wrap:wrap;gap:12px}.sp .arr{display:none}.sp .nd{flex:1 1 40%}
 .sp .sh{flex-direction:column;align-items:flex-start}.sp .sh>p{text-align:left}
 .sp .fl{display:none}
}
@media(max-width:640px){
 .sp .w{width:calc(100% - 32px)}.sp .keys,.sp .trust,.sp .bento,.sp .fcards,.sp .fcards.c3,.sp .tiles,.sp .ben,.sp .subs,.sp .fl4{grid-template-columns:1fr}
 .sp .trust>div+div{border-left:0;border-top:1px solid #EDF1F9}.sp .lay{grid-template-columns:1fr}.sp .lay+.lay::before{display:none}
 .sp .cg{grid-template-columns:1fr}.sp .side{display:none}.sp .scan{grid-template-columns:1fr}
 .sp .cta{grid-template-columns:1fr;padding:30px}.sp .cta .b2{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.sp *{animation:none!important}.sp .card,.sp .ic{transition:none}}

/* ───── 상단 아이콘 궤도 (화면 예시 대신) ───── */
.sp .orb{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1/0.92}
.sp .orb .ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.sp .orb .r1{width:84%;height:80%;border:1.5px dashed color-mix(in srgb,var(--c) 30%,#fff);animation:spSpin 40s linear infinite}
.sp .orb .r2{width:58%;height:55%;border:1.5px solid color-mix(in srgb,var(--c) 16%,#fff);background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));animation:spSpin 28s linear infinite reverse}
.sp .orb .r3{width:100%;height:96%;border:1px solid rgba(255,255,255,.9)}
.sp .orb .r1::before,.sp .orb .r2::before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:linear-gradient(135deg,var(--c),var(--g));box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 15%,transparent)}
.sp .orb .r2::before{top:auto;bottom:-6px;width:9px;height:9px;margin-left:-4.5px}
@keyframes spSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.sp .orb .glow{position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--g) 40%,transparent),transparent);animation:spPulse 4s ease-in-out infinite}
@keyframes spPulse{50%{transform:translate(-50%,-50%) scale(1.18);opacity:.6}}
.sp .orb .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36%;aspect-ratio:1;border-radius:32%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(150deg,#0F1E45,#22377A 60%,#3B3D9E);color:#fff;box-shadow:0 30px 60px rgba(15,30,69,.35),inset 0 0 0 1px rgba(255,255,255,.12);text-align:center;padding:10px;animation:spCore 6s ease-in-out infinite}
@keyframes spCore{50%{transform:translate(-50%,-54%)}}
.sp .orb .core::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,var(--c),transparent 40%,var(--g));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.sp .orb .core-ic{display:grid;place-items:center;width:52%;aspect-ratio:1;border-radius:28%;background:linear-gradient(135deg,var(--c),var(--g));box-shadow:0 12px 26px color-mix(in srgb,var(--c) 45%,transparent)}
.sp .orb .core-ic svg.i{width:48%;height:48%;color:#fff;stroke-width:1.7}
.sp .orb .core b{font-size:clamp(13px,1.35vw,17px);font-weight:900;letter-spacing:-.02em;line-height:1.2}
.sp .orb .core small{font-size:9px;font-weight:800;letter-spacing:.2em;color:#9FB6FF}
.sp .orb .sat{position:absolute;transform:translate(-50%,-50%);z-index:2}
.sp .orb .sat-in{display:flex;align-items:center;gap:9px;padding:8px 13px 8px 8px;border-radius:16px;background:rgba(255,255,255,.95);border:1px solid #E4EBF8;box-shadow:0 14px 30px rgba(30,50,140,.14);white-space:nowrap;animation:spBob 5s ease-in-out infinite;animation-delay:calc(var(--k)*-.8s);transition:transform .35s var(--ease),box-shadow .35s}
.sp .orb .sat-in:hover{transform:scale(1.06);box-shadow:0 20px 40px color-mix(in srgb,var(--c) 25%,transparent)}
.sp .orb .sat .ic{width:34px;height:34px;border-radius:11px}.sp .orb .sat svg.i{width:17px;height:17px}
.sp .orb .sat b{font-size:12.5px;font-weight:800;color:#22345E}
@keyframes spBob{50%{transform:translateY(-8px)}}
/* 등장 시 궤도 아이콘이 하나씩 나타남 */
.sp-vis[data-rv] .sat{opacity:0;transition:opacity .6s,transform .8s var(--ease);transition-delay:calc(var(--k)*.12s + .3s);transform:translate(-50%,-50%) scale(.6)}
.sp-vis[data-rv].in .sat{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ───── 공통 애니메이션 보강 ───── */
.sp .k{display:inline-flex;align-items:center;gap:8px}
.sp .k::before{content:"";width:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--c),var(--g));transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease) .2s}
.sp .in .k::before,.sp .in.k::before{transform:scaleX(1)}
.sp .sh h2 em{position:relative}
.sp .sh h2 em::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--c),var(--g));opacity:.25;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .35s}
.sp .sh.in h2 em::after{transform:scaleX(1)}
/* 카드 빛 지나가는 효과 */
.sp .card{position:relative;overflow:hidden}
.sp .card.h::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);pointer-events:none;transition:left .9s var(--ease)}
.sp .card.h:hover::after{left:130%}
.sp .bx.dk::after{display:none}
/* 진한 카드 배경 빛 이동 */
.sp .bx.dk::before{animation:spDrift 9s ease-in-out infinite}
@keyframes spDrift{50%{transform:translate(-60px,50px) scale(1.15)}}
/* 진한 카드 목록 차례로 */
.sp [data-rv] .dlist div{opacity:0;transform:translateX(-14px);transition:opacity .5s,transform .6s var(--ease)}
.sp [data-rv].in .dlist div{opacity:1;transform:none}
.sp .dlist div:nth-child(2){transition-delay:.12s}.sp .dlist div:nth-child(3){transition-delay:.24s}.sp .dlist div:nth-child(4){transition-delay:.36s}.sp .dlist div:nth-child(5){transition-delay:.48s}
/* 흐름도 단계가 차례로 */
.sp .pipe[data-rv] .nd{opacity:0;transform:translateY(18px) scale(.96);transition:opacity .6s,transform .7s var(--ease)}
.sp .pipe[data-rv].in .nd{opacity:1;transform:none}
.sp .pipe .nd:nth-child(3){transition-delay:.18s}.sp .pipe .nd:nth-child(5){transition-delay:.36s}.sp .pipe .nd:nth-child(7){transition-delay:.54s}
.sp .nd.core{animation:spGlow 3.5s ease-in-out infinite}
@keyframes spGlow{50%{box-shadow:0 26px 56px color-mix(in srgb,var(--c) 50%,transparent)}}
/* 구성도 층이 차례로 */
.sp .arch[data-rv] .lay{opacity:0;transform:translateX(-20px);transition:opacity .6s,transform .7s var(--ease)}
.sp .arch[data-rv].in .lay{opacity:1;transform:none}
.sp .arch .lay:nth-child(2){transition-delay:.15s}.sp .arch .lay:nth-child(3){transition-delay:.3s}.sp .arch .lay:nth-child(4){transition-delay:.45s}
/* 신뢰 띠 아이콘 */
.sp .trust .ic{animation:spBob 6s ease-in-out infinite}
.sp .trust>div:nth-child(2) .ic{animation-delay:-2s}.sp .trust>div:nth-child(3) .ic{animation-delay:-4s}
/* 도입효과 숫자 */
.sp .bc .no{transition:transform .5s var(--ease),opacity .4s}.sp .bc:hover .no{transform:translateY(-4px) scale(1.08);opacity:.22}
@media(max-width:1060px){.sp .orb{max-width:460px}.sp .orb .sat b{font-size:11.5px}}
@media(max-width:640px){.sp .orb{aspect-ratio:1/1.05}.sp .orb .sat b{display:none}.sp .orb .sat-in{padding:8px}}
@media(prefers-reduced-motion:reduce){.sp-vis[data-rv] .sat,.sp [data-rv] .dlist div,.sp .pipe[data-rv] .nd,.sp .arch[data-rv] .lay{opacity:1!important;transform:none!important}}
.sp .orb .ring{display:block;background:none}
.sp .orb .r2{background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0))}