/* 지페 · 부가 서비스 (services.html) 효과. 패키지 구성기는 JS가 켜졌을 때만 보임(html.sv-js). html.sv-on = 모션 허용 */
html:not(.sv-js) .sv-build,html:not(.sv-js) a[href="#builder"]{display:none}

/* ── 히어로: 키트 사진과 AI 기능 알약이 떠다니는 모음 (포인터에 따라 깊이별로 움직임) ── */
.pg-services .pg-hero__vis{position:relative;display:block;padding:0;min-height:clamp(430px,40vw,700px)}
.sv-hero{position:absolute;inset:0}
.sv-hero__i{position:absolute;left:var(--x);top:var(--y);width:var(--w,auto);transform:translate3d(calc(var(--px,0) * var(--z,10) * 1px),calc(var(--py,0) * var(--z,10) * .7px),0) rotate(var(--r,0deg));transition:transform .7s var(--out)}
.sv-hero__f{margin:0;aspect-ratio:var(--ar,4/3);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 0 0 6px #fff,0 26px 50px -20px rgba(25,31,40,.5)}
.sv-hero__f img{width:100%;height:100%;object-fit:cover}
.sv-hero__pill{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1.15em .55em .85em;border-radius:99px;background:#fff;box-shadow:var(--sh2),0 0 0 1px rgba(25,31,40,.05);color:var(--ink);font-size:clamp(14px,1.15vw,19px);font-weight:800;white-space:nowrap}
.sv-hero__pill svg{width:1.35em;height:1.35em;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sv-on .sv-hero.is-play .sv-hero__f,.sv-on .sv-hero.is-play .sv-hero__pill{animation:svFloat 7s ease-in-out infinite}
.sv-on .sv-hero.is-play .sv-hero__i:nth-child(2) .sv-hero__f{animation-duration:8.5s;animation-delay:-2s}
.sv-on .sv-hero.is-play .sv-hero__i:nth-child(3) .sv-hero__f{animation-duration:6.5s;animation-delay:-4s}
.sv-on .sv-hero.is-play .sv-hero__pill{animation-duration:5.5s;animation-delay:calc(var(--k,0) * -1.4s)}
@keyframes svFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@media (max-width:1023px){.pg-services .pg-hero__vis{min-height:clamp(380px,100vw,520px)}}

/* ── 패키지 구성기 ── */
.sv-b{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3.4vw,64px);align-items:start}
.sv-b__pick{min-width:0}
.sv-g{margin:0 0 clamp(22px,2.4vw,36px);padding:0;border:0;min-width:0}
.sv-g legend{float:left;width:100%;margin-bottom:14px;padding:0;color:#b6bfd3;font-size:clamp(15px,1.1vw,18px);font-weight:800}
.sv-chips{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sv-chip{position:relative;display:flex;align-items:center;gap:14px;min-height:78px;padding:12px 16px 12px 12px;border:0;border-radius:20px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);color:#fff;text-align:left;cursor:pointer;transition:background .3s,box-shadow .3s,transform .45s var(--spring)}
.sv-chip:hover{background:rgba(255,255,255,.12);transform:translate3d(0,-2px,0)}
.sv-chip:active{transform:scale(.97)}
.sv-chip[aria-pressed="true"]{background:rgba(30,77,216,.4);box-shadow:inset 0 0 0 2px #5b86ff}
.sv-chip[data-g="ad"][aria-pressed="true"]{background:rgba(255,216,77,.15);box-shadow:inset 0 0 0 2px var(--wave)}
.sv-chip__i{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.1)}
.sv-chip__i svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sv-chip__i img{width:100%;height:100%;object-fit:cover}
.sv-chip__t{font-size:clamp(16px,1.2vw,19px);font-weight:800;letter-spacing:-.03em;line-height:1.3}
.sv-chip__ck{position:relative;flex:none;width:26px;height:26px;margin-left:auto;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);transition:background .3s,box-shadow .3s,transform .5s var(--spring)}
.sv-chip__ck::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:11px;margin:-7px 0 0 -3px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(40deg) scale(0);transition:transform .4s var(--spring)}
.sv-chip[aria-pressed="true"] .sv-chip__ck{background:var(--wave);box-shadow:none;transform:scale(1.12)}
.sv-chip[aria-pressed="true"] .sv-chip__ck::after{transform:rotate(40deg) scale(1)}
.sv-b .sec__fn{margin-top:0;color:#aab3c6}

.sv-sum{position:sticky;top:calc(var(--hdr) + 24px);padding:clamp(22px,2.2vw,36px);border-radius:var(--r4);background:#fff;color:var(--ink);box-shadow:0 30px 80px -24px rgba(0,0,0,.6)}
.sv-sum__h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sv-sum__h h3{font-size:clamp(22px,1.8vw,30px);font-weight:800;letter-spacing:-.04em}
.sv-sum__n{padding:.35em .95em;border-radius:99px;background:var(--mist);color:var(--ink2);font-size:15px;font-weight:800;white-space:nowrap}
.sv-sum__n b{display:inline-block;margin-right:.15em;color:var(--blue);font-variant-numeric:tabular-nums}
.sv-sum__n.is-pop b{animation:svPop .5s var(--spring)}
@keyframes svPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.sv-sum__empty{padding:clamp(28px,3.4vw,52px) 0;color:var(--ink3);font-size:16px;text-align:center}
.sv-sum__list{margin-top:10px}
.sv-sum__list:empty{display:none}
.sv-sum__list:not(:empty)+.sv-sum__bundle,.sv-sum__list:not(:empty)~.sv-sum__fn{margin-top:14px}
.sv-it{display:grid;grid-template-rows:1fr;opacity:1}
.sv-it__in{min-height:0;overflow:hidden}
.sv-it__row{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.sv-it:first-child .sv-it__row{border-top:0}
.sv-it__i{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;overflow:hidden;background:var(--mist);color:var(--ink)}
.sv-it__i svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sv-it__i img{width:100%;height:100%;object-fit:cover}
.sv-it__t{flex:1;min-width:0}
.sv-it__t b{display:block;font-size:clamp(16px,1.2vw,19px);font-weight:800;letter-spacing:-.03em}
.sv-it__t p{margin-top:.15em;color:var(--ink2);font-size:14px;line-height:1.5}
.sv-it__x{position:relative;flex:none;width:32px;height:32px;border:0;border-radius:50%;background:var(--mist);cursor:pointer;transition:background .2s,transform .3s var(--spring)}
.sv-it__x::before,.sv-it__x::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink2);transform:rotate(45deg)}
.sv-it__x::after{transform:rotate(-45deg)}
.sv-it__x:hover{background:#fdebea}
.sv-it__x:hover::before,.sv-it__x:hover::after{background:#b02a21}
.sv-it__x:active{transform:scale(.88)}
.sv-sum__bundle{padding:.9em 1.1em;border-radius:16px;background:#fff6d6;color:#5c4400;font-size:14.5px;font-weight:700;line-height:1.55}
.sv-sum__fn{margin-top:14px;color:var(--ink2);font-size:14.5px;line-height:1.6}
.sv-sum__btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(16px,1.6vw,24px)}
.sv-sum__btns .btn{height:3em;padding:0 1.3em;font-size:clamp(15px,1.05vw,17px)}
.sv-sum__copy{height:3em;padding:0 1.2em;font-size:14px}
.sv-sum__copy:disabled{opacity:.4;cursor:default}
.sv-sum__copy:disabled:hover{background:var(--mist);color:var(--ink2)}
/* 담고 빼는 움직임 (모션 허용일 때만) */
.sv-on .sv-it{grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--out),opacity .4s}
.sv-on .sv-it.is-in{grid-template-rows:1fr;opacity:1}
.sv-on .sv-sum__bundle:not([hidden]){animation:fxUp .6s var(--out) both}
@media (max-width:1023px){
  .sv-b{grid-template-columns:minmax(0,1fr)}
  .sv-sum{position:static}
}
@media (max-width:560px){.sv-chips{grid-template-columns:minmax(0,1fr)}}

/* ── 카드: 빛 + 차례 등장 ── */
#ai .card,#offline .card{--spot:rgba(30,77,216,.1)}
#offline .card{background:#fff}
.sec--mist#offline .card.fx-spot::before{--spot:rgba(255,216,77,.34)}

/* ── 키트 갤러리: 끌기 · 이전/다음 · 진행 막대 · 담은 항목 표시 ── */
.sv-gal{position:relative;margin-top:clamp(28px,3vw,52px)}
.sv-gal .gal{margin-top:0;cursor:grab;scrollbar-width:none}
.sv-gal .gal::-webkit-scrollbar{display:none}
.sv-gal .gal.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none;outline:0}
.sv-gal .gal.is-drag img{pointer-events:none}
.sv-gal .gal__i{position:relative}
.sv-gal .gal__i img{transition:transform .5s var(--out),box-shadow .4s}
.sv-gal .gal__i:hover img{transform:translate3d(0,-4px,0);box-shadow:var(--sh2)}
.sv-gal .gal__i.is-picked img{box-shadow:0 0 0 2px var(--blue),var(--sh1)}
.sv-gal .gal__i.is-picked::after{content:"✓ 담았어요";position:absolute;left:12px;top:12px;padding:.3em .8em;border-radius:99px;background:var(--blue);color:#fff;font-size:13px;font-weight:800;animation:svPop .45s var(--spring)}
.sv-gal__bar{display:flex;align-items:center;gap:16px;margin-top:6px}
.sv-gal__trk{position:relative;flex:1;height:4px;border-radius:4px;background:rgba(25,31,40,.1);overflow:hidden}
.sv-gal__trk i{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:4px;background:var(--ink);transform-origin:0 50%;transform:translate3d(calc(var(--pl,0) * 100%),0,0) scaleX(var(--pw,.3))}
.sv-gal__nav{display:flex;gap:8px}
.sv-gal__nav button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;box-shadow:var(--sh1);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;transition:transform .3s var(--spring),background .2s,color .2s,opacity .2s}
.sv-gal__nav button:hover{background:var(--ink);color:#fff}
.sv-gal__nav button:active{transform:scale(.9)}
.sv-gal__nav button:disabled{opacity:.3;pointer-events:none}

/* ── 묶음 신청: 두 조각이 합쳐져 하나의 혜택으로 ── */
.sv-bundle{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(8px,1vw,16px);margin-top:clamp(32px,3.6vw,60px)}
.sv-bundle span,.sv-bundle b{padding:.7em 1.4em;border-radius:99px;font-size:clamp(16px,1.35vw,22px);font-weight:800}
.sv-bundle span{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.sv-bundle b{background:var(--wave);color:var(--ink)}
.sv-bundle i{color:#b6bfd3;font-size:clamp(22px,2vw,32px);font-style:normal;font-weight:800}
.sv-on .sv-bundle span,.sv-on .sv-bundle i,.sv-on .sv-bundle b{opacity:0}
.sv-on .sv-bundle.is-go .sv-bundle__a{animation:svFromL .8s var(--out) both}
.sv-on .sv-bundle.is-go .sv-bundle__b{animation:svFromR .8s var(--out) .12s both}
.sv-on .sv-bundle.is-go .sv-bundle__p{animation:svPlus .7s var(--spring) .5s both}
.sv-on .sv-bundle.is-go .sv-bundle__e{animation:fxUp .6s var(--out) .9s both}
.sv-on .sv-bundle.is-go .sv-bundle__r{animation:svBurst .8s var(--spring) 1.1s both}
@keyframes svFromL{from{opacity:0;transform:translate3d(-48px,0,0)}to{opacity:1;transform:none}}
@keyframes svFromR{from{opacity:0;transform:translate3d(48px,0,0)}to{opacity:1;transform:none}}
@keyframes svPlus{from{opacity:0;transform:rotate(-180deg) scale(.3)}to{opacity:1;transform:none}}
@keyframes svBurst{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media (max-width:640px){.sv-bundle i.sv-bundle__e{display:none}}

@media (prefers-reduced-motion:reduce){
  .sv-on .sv-it,.sv-on .sv-bundle span,.sv-on .sv-bundle i,.sv-on .sv-bundle b{transition:none;animation:none;opacity:1}
  .sv-on .sv-hero.is-play *{animation:none!important}
  .sv-gal__nav button{transition:none}
}
.sv-build :focus-visible{outline-color:var(--wave)}
.sv-sum :focus-visible{outline-color:var(--blue)}
@media print{html .sv-build{display:none}.sv-gal__bar{display:none}}