/* 메인 솔루션 쇼케이스 (index.html #solutions) */
.sc{--navy:#14234B;--ink2:#4A5A86;--ink3:#5F6C94;--blue:#3F66F0;--violet:#6A58F5;--ease:cubic-bezier(.2,.75,.2,1);--dur:5s;
  position:relative;overflow:hidden;padding:110px 32px 120px;color:var(--navy);word-break:keep-all;line-height:1.5;
  background:
    radial-gradient(900px 640px at 0% 6%,rgba(150,190,255,.8),rgba(150,190,255,0) 62%),
    radial-gradient(900px 760px at 100% 40%,rgba(196,178,255,.75),rgba(196,178,255,0) 62%),
    linear-gradient(180deg,#F6F9FF 0%,#EEF3FF 58%,#E2EDFF 100%)}
.sc *{box-sizing:border-box}
:where(.sc) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:left;padding:0}
.sc :focus-visible{outline:3px solid #7B8CFF;outline-offset:3px;border-radius:14px}
.sc-wrap{position:relative;z-index:2;width:100%;max-width:1360px;margin:0 auto;display:flex;flex-direction:column;gap:32px}

.sc-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sc h2{margin:0;font-size:clamp(34px,4.4vw,60px);line-height:1.2;font-weight:800;letter-spacing:-.04em;color:var(--navy)}
.sc h2 span{display:block;background:linear-gradient(90deg,#4F7BFF,#7B6CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-lead{margin:0;font-size:clamp(15px,1.4vw,19px);color:var(--ink2);padding-left:20px;border-left:1.5px solid rgba(110,130,210,.35);line-height:1.7}

.sc-main{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:stretch}
.sc-nav{display:flex;flex-direction:column;gap:12px}
.sc-cat{flex:1;display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:26px;background:rgba(255,255,255,.7);border:2px solid rgba(255,255,255,.95);box-shadow:0 10px 26px rgba(90,110,200,.1);transition:background .35s,color .35s,box-shadow .35s,transform .35s var(--ease)}
.sc-cat:hover{transform:translateX(6px)}
.sc-nt{position:relative;isolation:isolate;flex:none;display:grid;place-items:center;width:48px;height:48px;color:var(--navy)}
.sc-nt::before{content:"";position:absolute;inset:7px;z-index:-1;border-radius:11px;transform:rotate(45deg);background:var(--g);border:1.5px solid rgba(255,255,255,.85);box-shadow:0 6px 12px rgba(100,120,230,.22)}
.sc-nt svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-cat b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.sc-cat small{display:block;margin-top:2px;font-size:13.5px;color:var(--ink3);transition:color .3s}
.sc-cat[aria-current="true"]{background:linear-gradient(135deg,#3F66F0,#6A58F5);color:#fff;border-color:rgba(255,255,255,.5);box-shadow:0 22px 44px rgba(80,90,240,.36)}
.sc-cat[aria-current="true"] small{color:rgba(255,255,255,.85)}
.sc-cat[aria-current="true"]:hover{transform:none}
.sc-t-lms{--g:linear-gradient(135deg,#9DBDFF,#D3E0FF)}.sc-t-data{--g:linear-gradient(135deg,#B7A9FF,#E0D9FF)}.sc-t-ai{--g:linear-gradient(135deg,#FFA9BD,#FFD6E0)}.sc-t-por{--g:linear-gradient(135deg,#90D6EE,#CBEEF8)}

.sc-stage{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:center;padding:44px 44px 44px 48px;min-height:500px;border-radius:44px;background:linear-gradient(150deg,rgba(255,255,255,.88),rgba(240,244,255,.72));border:2px solid #fff;box-shadow:0 40px 90px rgba(80,100,200,.2),0 1px 0 #fff inset}
.sc-stage::before{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:30%;transform:rotate(45deg);border:2px solid rgba(255,255,255,.9);background:linear-gradient(135deg,rgba(170,190,255,.38),rgba(255,255,255,0));pointer-events:none}
.sc-stage::after{content:"";position:absolute;left:-90px;bottom:-110px;width:280px;height:280px;border-radius:30%;transform:rotate(45deg);border:2px solid rgba(255,255,255,.9);background:linear-gradient(135deg,rgba(190,170,255,.3),rgba(255,255,255,0));pointer-events:none}

.sc-txt{position:relative;z-index:1}
.sc-tag{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 8px;border-radius:999px;background:#fff;border:1.5px solid #D5DFFF;font-size:15px;font-weight:700;color:var(--blue);box-shadow:0 6px 16px rgba(90,110,220,.12)}
.sc-tag i{display:block;width:12px;height:12px;border-radius:3px;margin-left:6px;transform:rotate(45deg);background:linear-gradient(135deg,#4F7BFF,#7B6CFF)}
.sc .sc-name{margin:22px 0 0;font-size:clamp(34px,3.8vw,54px);line-height:1.15;font-weight:800;letter-spacing:-.04em}
.sc-desc{margin:16px 0 0;max-width:19em;font-size:clamp(16px,1.5vw,20px);line-height:1.7;color:var(--ink2)}
.sc-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.sc-chips .sc-chip{padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.88);border:1.5px solid #D5DFFF;font-size:15px;font-weight:650;color:var(--ink2);transition:all .3s var(--ease)}
.sc-chip:hover{border-color:#9FB4F5;color:var(--blue);transform:translateY(-2px)}
.sc-chip[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.sc a.sc-link{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:15px;font-weight:750;color:var(--blue);text-decoration:none;transition:gap .25s var(--ease)}
.sc a.sc-link:hover{gap:14px}
.sc-link[hidden]{display:none}
.sc-swap>*{animation:scRise .7s var(--ease) backwards}
.sc-swap>*:nth-child(2){animation-delay:.07s}.sc-swap>*:nth-child(3){animation-delay:.14s}.sc-swap>*:nth-child(4){animation-delay:.21s}.sc-swap>*:nth-child(5){animation-delay:.28s}
@keyframes scRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.sc-devwrap{position:relative;z-index:1;perspective:1400px}
.sc-dev{position:relative;border-radius:26px;background:#fff;border:2px solid #fff;overflow:hidden;box-shadow:0 40px 80px rgba(70,90,220,.28),0 0 0 1px rgba(150,170,240,.25);transform:rotateY(var(--ry,-7deg)) rotateX(var(--rx,3deg));transition:transform .5s var(--ease);animation:scBob 6s ease-in-out infinite}
.sc-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px;background:#F1F4FF;border-bottom:1px solid #E1E8FB}
.sc-bar i{width:10px;height:10px;border-radius:50%;background:#C9D3F5}
.sc-bar i:nth-child(1){background:#FFA9BD}.sc-bar i:nth-child(2){background:#FFD27A}.sc-bar i:nth-child(3){background:#86D2EC}
.sc-url{margin-left:14px;flex:1;max-width:260px;padding:3px 14px;border-radius:999px;background:#fff;font-size:12.5px;font-weight:600;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-shots{position:relative;aspect-ratio:560/328;background:#F7F9FF}
.sc-shot{display:none;position:absolute;inset:0}
.sc-shot.on{display:block;animation:scShotIn .6s var(--ease)}
.sc-shot svg{display:block;width:100%;height:100%}
@keyframes scShotIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes scBob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.sc-glowb{position:absolute;left:8%;right:8%;bottom:-26px;height:70px;border-radius:50%;background:rgba(100,110,240,.4);filter:blur(34px);z-index:-1}

.sc-segs{display:flex;gap:8px;margin-left:304px}
.sc-seg{flex:1;height:22px;display:flex;align-items:center}
.sc-seg span{position:relative;display:block;width:100%;height:6px;border-radius:3px;background:rgba(120,140,220,.25);overflow:hidden}
.sc-seg span i{position:absolute;inset:0;background:linear-gradient(90deg,#4F7BFF,#7B6CFF);transform:scaleX(0);transform-origin:left}
.sc-seg.done span i{transform:scaleX(1)}
.sc-seg.on span i{animation:scSeg var(--dur) linear forwards}
.sc.hold .sc-seg.on span i{animation-play-state:paused}
@keyframes scSeg{to{transform:scaleX(1)}}

.sc-gem{position:absolute;z-index:1;border-radius:24%;transform:rotate(45deg);border:3px solid rgba(255,255,255,.8);box-shadow:inset 0 0 44px rgba(255,255,255,.7),0 30px 70px rgba(110,130,255,.22);animation:scDrift 9s ease-in-out infinite;pointer-events:none}
.sc-g1{right:3%;top:3%;width:150px;height:150px;background:linear-gradient(135deg,rgba(140,180,255,.7),rgba(196,210,255,.3))}
.sc-g2{left:-50px;bottom:12%;width:120px;height:120px;background:linear-gradient(135deg,rgba(150,214,236,.7),rgba(200,236,246,.3));animation-delay:-4s}
@keyframes scDrift{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(55deg) translate(-12px,-16px)}}
.sc-wave{position:absolute;left:0;bottom:0;width:100%;height:200px;z-index:0;pointer-events:none}

.sc-rv{opacity:0;transform:translateY(24px)}
.sc.on .sc-rv{opacity:1;transform:none;animation:scRv .9s var(--ease) backwards;animation-delay:calc(var(--i,0) * .12s)}
@keyframes scRv{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* 제품 화면 안 모션 */
.sc-shot *{transform-box:fill-box}
.sc-ap{opacity:0;animation:scAp .6s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes scAp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sc-gx{transform-origin:0 50%;transform:scaleX(0);animation:scGx 1.1s var(--ease) forwards;animation-delay:var(--d,.3s)}
@keyframes scGx{to{transform:scaleX(1)}}
.sc-gy{transform-origin:50% 100%;transform:scaleY(0);animation:scGy .9s var(--ease) forwards;animation-delay:var(--d,.3s)}
@keyframes scGy{to{transform:scaleY(1)}}
.sc-dr{stroke-dasharray:1;stroke-dashoffset:1;animation:scDr 1.6s ease forwards;animation-delay:var(--d,.2s)}
@keyframes scDr{to{stroke-dashoffset:0}}
.sc-fw{stroke-dasharray:6 8;animation:scFw 1s linear infinite}
@keyframes scFw{to{stroke-dashoffset:-14}}
.sc-pl{transform-origin:center;animation:scPl 2.4s ease-in-out infinite}
@keyframes scPl{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.sc-bl{animation:scBl 1.2s ease-in-out infinite}
@keyframes scBl{0%,100%{opacity:.25}50%{opacity:1}}
.sc-spin{transform-origin:center;animation:scSpin 14s linear infinite}
@keyframes scSpin{to{transform:rotate(360deg)}}
.sc-gg{stroke-dasharray:490;stroke-dashoffset:490;animation:scGg 1.8s var(--ease) .3s forwards}
@keyframes scGg{to{stroke-dashoffset:69}}
.sc-gg2{stroke-dasharray:176;stroke-dashoffset:176;animation:scGg2 1.8s var(--ease) .3s forwards}
@keyframes scGg2{to{stroke-dashoffset:30}}

@media (max-width:1100px){
  .sc-main{grid-template-columns:1fr}
  .sc-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .sc-cat{padding:12px 14px;gap:10px}.sc-cat b{font-size:18px}.sc-nt{width:40px;height:40px}.sc-nt::before{inset:5px}.sc-nt svg{width:18px;height:18px}
  .sc-cat:hover{transform:none}
  .sc-stage{grid-template-columns:1fr;min-height:0;padding:36px 28px}
  .sc-segs{margin-left:0}
}
@media (max-width:640px){
  .sc{padding:72px 16px 80px}
  .sc-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-stage{padding:28px 18px;border-radius:32px;gap:28px}
  .sc-dev{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .sc *{animation:none!important;transition:none!important}
  .sc-rv,.sc-ap{opacity:1!important;transform:none!important}
  .sc-gx,.sc-gy{transform:none}.sc-dr{stroke-dashoffset:0}.sc-gg{stroke-dashoffset:69}.sc-gg2{stroke-dashoffset:30}
  .sc-seg.on span i{transform:scaleX(1)}
}


/* ───── 문구 배치 변경: 제목 아래 한 줄 설명 ───── */
.sc-hd{display:block}
.sc h2 span{display:inline}
.sc-lead{border:0;padding:0;margin-top:14px;font-size:clamp(16px,1.5vw,21px)}

/* ───── 스크롤로 제품을 넘기는 고정(pin) 모드 ───── */
.sc-hint,.sc-spot{display:none}
.sc-pin.sc-pinned .sc{position:sticky;top:0;height:100vh;padding:40px 32px;display:flex;align-items:center}
.sc-pin.sc-pinned .sc-wrap{gap:22px}
.sc-pin.sc-pinned .sc-stage{min-height:0;height:min(480px,calc(100vh - 290px))}
.sc-pin.sc-pinned .sc-seg.on span i{animation:none}
.sc-pin.sc-pinned .sc-spot{display:block;position:absolute;left:50%;top:56%;width:min(1300px,92%);height:560px;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(110,130,255,.30),rgba(110,130,255,0) 72%);opacity:calc(var(--e,1)*.95)}
/* 들어올 때: 아래에서 크게 떠오르며 또렷해짐 */
.sc-pin.sc-pinned .sc.on .sc-main{animation:none;transform-origin:50% 100%;opacity:calc(.08 + .92*var(--e,1));transform:translateY(calc((1 - var(--e,1))*110px)) scale(calc(.88 + .12*var(--e,1)))}
.sc-pin.sc-pinned .sc.on .sc-hd{animation:none;opacity:calc(.1 + .9*var(--e,1));transform:translateY(calc((1 - var(--e,1))*-36px))}
.sc-pin.sc-pinned .sc.on .sc-segs{animation:none;opacity:var(--e,1);transform:none}
.sc-pin.sc-pinned .sc-g1{translate:0 calc(var(--p,0)*-120px)}
.sc-pin.sc-pinned .sc-g2{translate:0 calc(var(--p,0)*90px)}
.sc-pin.sc-pinned .sc-hint{display:flex;align-items:center;justify-content:center;gap:12px;margin:-4px 0 0 304px;font-size:13px;color:var(--ink3);letter-spacing:-.02em;opacity:clamp(0,calc(1 - var(--p,0)*20),1)}
.sc-hint i{display:block;width:10px;height:10px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);animation:scHint 1.4s ease-in-out infinite}
@keyframes scHint{0%,100%{translate:0 -3px;opacity:.5}50%{translate:0 3px;opacity:1}}
@media (max-height:820px){
  .sc-pin.sc-pinned .sc{padding:28px 32px}
  .sc-pin.sc-pinned .sc-wrap{gap:16px}
  .sc-pin.sc-pinned h2{font-size:clamp(30px,3.4vw,46px)}
  .sc-pin.sc-pinned .sc-lead{margin-top:8px;font-size:16px}
  .sc-pin.sc-pinned .sc-stage{padding:28px 40px;height:min(440px,calc(100vh - 250px))}
  .sc-pin.sc-pinned .sc .sc-name{font-size:clamp(30px,3.2vw,44px);margin-top:14px}
  .sc-pin.sc-pinned .sc-desc{margin-top:10px}
  .sc-pin.sc-pinned .sc-chips{margin-top:20px}
  .sc-pin.sc-pinned a.sc-link{margin-top:16px}
  .sc-pin.sc-pinned .sc-cat{padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){.sc-hint i{animation:none}}

/* 글꼴 두께 (사이트 공통 글꼴 사용) */
.sc .sc-name{font-weight:700;letter-spacing:-.035em}
.sc-cat b{font-weight:700}
.sc-chip,.sc-tag,.sc a.sc-link{font-weight:700}
.sc-desc,.sc-lead{font-weight:400}

/* 제품명 포인트 색 */
.sc .sc-name .sc-nm{background-image:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 58%),linear-gradient(100deg,#1596ff 0%,#3f6bff 25%,#6f56f5 50%,#b36bff 75%,#1596ff 100%);background-size:60% 100%,200% 100%;background-repeat:no-repeat,repeat-x;background-position:-150% 0,0 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:scNm 6s linear infinite}
@keyframes scNm{from{background-position:-150% 0,0 0}to{background-position:260% 0,200% 0}}
@media (prefers-reduced-motion:reduce){.sc .sc-name .sc-nm{animation:none}}