/* 서비스 허브 — 어두운 중앙 무대에 3D 아이콘 여러 개(이 쪽의 움직임은 아이콘이 떠 있는 것 하나), 고민 카드 4장, 3D 아이콘 서비스 카드 격자, 검은 원칙 띠 */
.pg-services .sv-stage{overflow:hidden}
.pg-services .sv-stage .nl-hero{position:relative;padding:120px 0 150px}
.pg-services .sv-stage .nl-w{position:relative;z-index:1}
.pg-services .sv-float img{position:absolute;width:var(--s,120px);height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
.pg-services .sv-float .a{--s:150px;left:7%;top:12%}
.pg-services .sv-float .b{--s:120px;left:15%;top:52%}
.pg-services .sv-float .c{--s:110px;left:4%;bottom:6%}
.pg-services .sv-float .d{--s:96px;left:24%;bottom:2%;opacity:.85}
.pg-services .sv-float .e{--s:140px;right:7%;top:10%}
.pg-services .sv-float .f{--s:110px;right:17%;top:48%}
.pg-services .sv-float .g{--s:120px;right:4%;bottom:8%}
.pg-services .sv-float .h{--s:96px;right:25%;bottom:3%;opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .pg-services .sv-float img{animation:nl-float 7s ease-in-out infinite}
  .pg-services .sv-float img:nth-child(2n){animation-duration:8.5s;animation-delay:-2s}
  .pg-services .sv-float img:nth-child(3n){animation-delay:-4s}
}

/* 고민으로 고르기 */
.pg-services .sv-ask{text-align:center}
.pg-services .sv-ask .nl-sub{margin-left:auto;margin-right:auto}
.pg-services .sv-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:56px;text-align:left}
.pg-services .sv-pick a{position:relative;display:flex;flex-direction:column;min-height:300px;padding:28px 26px;border-radius:24px;background:#fff;border:1.5px solid var(--line);box-shadow:0 10px 50px -34px rgba(49,130,246,.6);transition:background .25s,border-color .25s,color .25s}
.pg-services .sv-pick img{width:96px;height:96px;object-fit:contain}
.pg-services .sv-pick small{margin-top:auto;font-size:13px;font-weight:700;color:var(--blue2)}
.pg-services .sv-pick b{margin-top:8px;font-size:20px;font-weight:800;line-height:1.4;letter-spacing:-.05em}
.pg-services .sv-pick .ic{position:absolute;right:24px;top:28px;width:22px;height:22px;color:#8b95a1;rotate:90deg}
@media (hover:hover){.pg-services .sv-pick a:hover{background:var(--blue);border-color:var(--blue);color:#fff}.pg-services .sv-pick a:hover small,.pg-services .sv-pick a:hover .ic{color:#fff}}

/* 서비스 카드 격자(목록은 seo/pages/services.html 값, 아이콘은 주소로 붙인다) */
.pg-services .sv-grp{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:56px 0;border-top:1px solid #d1d6db;scroll-margin-top:80px}
.pg-services .sv-grp:first-child{padding-top:0;border-top:0}
.pg-services .sv-grp .hd p{margin-top:12px;font-size:15.5px;line-height:1.7;color:var(--body)}
.pg-services .sv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pg-services .sv-cards a{position:relative;display:flex;flex-direction:column;height:100%;padding:24px 22px 22px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:border-color .2s,transform .2s var(--ease)}
.pg-services .sv-cards a::before{content:"";width:64px;height:64px;margin-bottom:14px;background:var(--i,url(/svc/blocks.webp)) center/contain no-repeat}
.pg-services .sv-cards a::after{content:"";position:absolute;right:20px;top:24px;width:28px;height:28px;border-radius:14px;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191f28' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/13px no-repeat;transition:background-color .2s}
.pg-services .sv-cards b{font-size:17.5px;font-weight:800;letter-spacing:-.04em}
.pg-services .sv-cards span{margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--body)}
@media (hover:hover){.pg-services .sv-cards a:hover{border-color:var(--blue);transform:translateY(-3px)}.pg-services .sv-cards a:hover::after{background-color:var(--bsoft)}}
.pg-services .sv-note{margin-top:8px;text-align:center}
.pg-services a[href="/블로그마케팅/"]{--i:url(/svc/blog.webp)}
.pg-services a[href="/네이버플레이스광고/"]{--i:url(/svc/place.webp)}
.pg-services a[href="/검색-관리/"]{--i:url(/svc/search.webp)}
.pg-services a[href="/언론-보도자료/"]{--i:url(/svc/press.webp)}
.pg-services a[href="/홈페이지-상세페이지-제작/"]{--i:url(/svc/web.webp)}
.pg-services a[href="/퍼포먼스-광고/"]{--i:url(/svc/perf.webp)}
.pg-services a[href="/옥외-광고/"]{--i:url(/svc/outdoor.webp)}
.pg-services a[href="/메타-광고-라이브러리/"]{--i:url(/svc/eye.webp)}
.pg-services a[href="/SNS-숏폼-운영/"]{--i:url(/svc/sns.webp)}
.pg-services a[href="/밈-마케팅/"]{--i:url(/svc/meme.webp)}
.pg-services a[href="/카페-커뮤니티-마케팅/"]{--i:url(/svc/cafe.webp)}
.pg-services a[href="/바이럴마케팅/"]{--i:url(/svc/viral.webp)}
.pg-services a[href="/블로그-체험단-구독/"]{--i:url(/svc/ribbon.webp)}
.pg-services a[href="/인플루언서-섭외/"]{--i:url(/svc/influencer.webp)}
.pg-services a[href="/콘텐츠-촬영/"]{--i:url(/svc/shoot.webp)}
.pg-services a[href="/평판-관리/"]{--i:url(/svc/reputation.webp)}
.pg-services a[href="/통합-마케팅-기획/"]{--i:url(/svc/imc.webp)}
.pg-services a[href="/제품-마케팅/"]{--i:url(/svc/product.webp)}
.pg-services a[href="/전문직-마케팅/"]{--i:url(/svc/pro.webp)}
.pg-services a[href="/프랜차이즈-브랜드-마케팅/"]{--i:url(/svc/franchise.webp)}
.pg-services a[href="/플랫폼-앱-마케팅/"]{--i:url(/svc/platform.webp)}
.pg-services a[href="/플레이스-순위-확인/"]{--i:url(/svc/target.webp)}

/* 검은 원칙 띠 */
.pg-services .sv-rule{text-align:center}
.pg-services .sv-princ{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:64px;text-align:left;counter-reset:p}
.pg-services .sv-princ li{counter-increment:p;padding:26px 24px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.pg-services .sv-princ li::before{content:counter(p,decimal-leading-zero);display:block;font-size:30px;font-weight:900;line-height:1;color:rgba(143,195,255,.55)}
.pg-services .sv-princ li:first-child{grid-column:span 2;background:var(--blue);border-color:var(--blue)}
.pg-services .sv-princ li:first-child::before{color:rgba(255,255,255,.45)}
.pg-services .sv-princ b{display:block;margin-top:16px;font-size:19px;font-weight:800;letter-spacing:-.05em}
.pg-services .sv-princ span{display:block;margin-top:8px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.78)}
.pg-services .sv-princ li:first-child span{color:rgba(255,255,255,.92)}
.pg-services .sv-rule .nl-pull .hl{background:linear-gradient(180deg,transparent 58%,rgba(49,130,246,.5) 58%)}

@media (max-width:1100px){.pg-services .sv-float .b,.pg-services .sv-float .f{display:none}.pg-services .sv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .pg-services .sv-stage .nl-hero{padding:240px 0 80px}
  .pg-services .sv-float .a{--s:110px;left:4%;top:4%}.pg-services .sv-float .e{--s:110px;right:4%;top:4%}
  .pg-services .sv-float .c{--s:84px;left:30%;top:2%;bottom:auto}.pg-services .sv-float .g{--s:84px;right:30%;top:2%;bottom:auto}
  .pg-services .sv-float .d,.pg-services .sv-float .h{display:none}
  .pg-services .sv-pick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-services .sv-pick a{min-height:240px}
  .pg-services .sv-grp{grid-template-columns:1fr;gap:24px;padding:44px 0}
  .pg-services .sv-princ{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .pg-services .sv-stage .nl-hero{padding:170px 0 64px}
  .pg-services .sv-float .a{--s:80px}.pg-services .sv-float .e{--s:80px}.pg-services .sv-float .c,.pg-services .sv-float .g{--s:64px;left:auto;right:auto}
  .pg-services .sv-float .c{left:28%}.pg-services .sv-float .g{right:28%}
  .pg-services .sv-pick{gap:12px;margin-top:40px}
  .pg-services .sv-pick a{min-height:210px;padding:20px 18px}
  .pg-services .sv-pick img{width:72px;height:72px}
  .pg-services .sv-pick b{font-size:17px}
  .pg-services .sv-pick .ic{right:16px;top:20px}
  .pg-services .sv-cards{grid-template-columns:1fr}
  .pg-services .sv-cards a{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:14px;padding:18px 54px 18px 18px}
  .pg-services .sv-cards a::before{width:52px;height:52px;margin:0}
  .pg-services .sv-cards b{flex:1}
  .pg-services .sv-cards span{flex-basis:100%}
  .pg-services .sv-cards a::after{top:50%;margin-top:-14px;right:16px}
  .pg-services .sv-princ{grid-template-columns:1fr}
  .pg-services .sv-princ li:first-child{grid-column:auto}
}