/* hero */
.sv-hero{padding:min(198px, 10.31vw) min(23px, 1.2vw) clamp(60px, 5vw, 96px)}
.sv-panel{
  position:relative;width:100%;height:min(865px, 45.05vw);min-height:520px;
  background:rgba(244,244,244,.9);border-radius:min(21px, 1.09vw);
  container-type:inline-size;
}
.sv-title{position:absolute;left:6.2%;top:36.1%;font-size:3.727cqw;font-weight:700;line-height:1.1;color:#000}
.sv-title em{font-style:normal;color:#0400FF}
.sv-desc{position:absolute;left:6.2%;top:60%;font-size:1.331cqw;font-weight:400;line-height:1.2;letter-spacing:-.02em;color:#000}
.sv-line{display:block}
.sv-visual{position:absolute;left:41.6%;top:12.5%;width:50.4%;height:auto}

@media (min-width:768px) and (max-width:1023px){
  .sv-hero{padding:calc(var(--header-h) + 24px) var(--gutter) 64px}
  .sv-panel{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto auto;align-content:center;column-gap:28px;
    height:auto;min-height:0;padding:56px 40px;border-radius:18px;
  }
  .sv-title,.sv-desc,.sv-visual{position:static;width:auto}
  .sv-title{grid-column:1;grid-row:1;align-self:end;font-size:44px;line-height:1.15}
  .sv-desc{grid-column:1;grid-row:2;align-self:start;margin-top:16px;font-size:15px;line-height:1.5}
  .sv-visual{grid-column:2;grid-row:1 / span 2;width:100%}
}

@media (max-width:767px){
  .sv-hero{padding:calc(var(--header-h) + 32px) var(--gutter) 60px}
  .sv-panel{height:auto;min-height:0;padding:40px 24px;border-radius:16px}
  .sv-title,.sv-desc,.sv-visual{position:static;width:auto}
  .sv-title{font-size:34px;line-height:1.2}
  .sv-desc{margin-top:16px;font-size:15px;line-height:1.5}
  .sv-visual{margin-top:32px;width:100%}
}

/* about */
.sv-about{padding:clamp(70px,6.5vw,125px) 0 clamp(80px,7.3vw,140px)}
.ab-head{text-align:center}
.ab-title{position:relative;display:inline-block;font-size:clamp(26px,3.13vw,60px);font-weight:800;line-height:1.3;letter-spacing:-.03em;color:#0400FF}
.ab-icon-spark{
  position:absolute;left:calc(100% + .08em);top:-.06em;width:.34em;height:.34em;background:#0400FF;
  -webkit-mask:url(/images/icon-spark.svg) center/contain no-repeat;mask:url(/images/icon-spark.svg) center/contain no-repeat;
}
.ab-sub{margin-top:clamp(10px,1vw,20px);font-size:clamp(13px,1.46vw,28px);line-height:1.4;letter-spacing:-.02em;color:#333}

.ab-body-grid{display:grid;grid-template-columns:minmax(0,866fr) minmax(0,630fr);gap:min(80px,4.2vw);align-items:center;margin-top:clamp(36px,3.6vw,70px)}
.ab-visual{display:grid;place-items:center;padding:min(40px,2vw);background:#F6F6F6;border-radius:min(26px,1.35vw)}
.ab-visual img{width:100%;height:auto}

.ab-list{display:flex;flex-direction:column;gap:min(60px,3.1vw)}
.ab-item{display:flex;align-items:flex-start;gap:min(46px,2.4vw)}
.ab-icon{flex:none;width:min(112px,5.84vw)}
.ab-icon svg{width:100%;height:auto;display:block}
.ab-name{font-size:clamp(15px,1.25vw,24px);font-weight:700;letter-spacing:-.02em;color:#000}
.ab-desc{margin-top:min(14px,.73vw);font-size:clamp(12px,1.04vw,20px);line-height:1.5;letter-spacing:-.02em;color:#555}

@media (max-width:767px){
  .ab-body-grid{grid-template-columns:1fr;gap:32px}
  .ab-list{gap:28px}
  .ab-item{gap:16px}
  .ab-icon{width:56px}
  .ab-desc br{display:none}
}

/* place hover list */
.sv-place{padding:0 0 clamp(80px,7.3vw,140px)}
.pl-title{position:relative;display:inline-block;font-size:clamp(22px,2.4vw,46px);font-weight:800;letter-spacing:-.03em;color:#000}
/* media grid */
.sv-media{padding:0 0 clamp(90px,8.3vw,160px)}
.mg-stage{position:relative;margin-top:min(60px,3.1vw);height:min(789px,41.1vw);min-height:420px}

.mg-item{position:absolute;transform:translate(-50%,-50%);outline:none;cursor:pointer}
.mg-item--naver{left:22.3%;top:39.5%}
.mg-item--kakao{left:56.1%;top:25.3%}
.mg-item--google{left:44.6%;top:65%}
.mg-item--app{left:76.6%;top:59%}
.mg-float{display:flex;flex-direction:column;align-items:center}
.mg-logo-wrap{position:relative;display:block}
.mg-glow{
  position:absolute;left:50%;top:50%;width:min(420px,21.9vw);height:min(420px,21.9vw);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(104,182,255,.3) 0%,rgba(104,182,255,.16) 42%,rgba(104,182,255,0) 70%);
  opacity:0;
}
.mg-label{
  position:relative;z-index:1;margin-bottom:min(30px,1.56vw);
  padding:min(9px,.47vw) min(22px,1.15vw);border-radius:999px;
  background:#fff;border:1px solid #E6E6E6;box-shadow:0 2px 10px rgba(0,0,0,.05);
  font-size:clamp(13px,1.15vw,22px);font-weight:600;letter-spacing:-.02em;color:#222;
}
.mg-logo{position:relative;z-index:1;display:block;width:min(150px,7.8vw);height:auto}

.mg-tags{position:absolute;left:50%;top:50%;width:0;height:0}
.mg-tag{
  position:absolute;left:0;top:0;
  padding:min(8px,.42vw) min(18px,.94vw);border-radius:999px;
  background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.12);
  font-size:clamp(11px,1.04vw,20px);letter-spacing:-.02em;color:#222;white-space:nowrap;
}

@media (max-width:1023px){
  .mg-stage{height:auto;min-height:0;display:grid;grid-template-columns:repeat(2,1fr);gap:40px 16px;margin-top:40px}
  .mg-item{position:static;transform:none}
  .mg-logo-wrap{display:flex;flex-direction:column;align-items:center}
  .mg-glow{display:none}
  .mg-label{transform:none}
  .mg-tags{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;height:auto;margin-top:14px}
  .mg-tag{position:static;font-size:12px;box-shadow:none;background:#F1F1F1}
}

/* steps */
.sv-steps{padding:0 0 clamp(60px,5.2vw,100px)}
.st-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:min(12px,.63vw);margin-top:min(50px,2.6vw)}
.st-card{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:min(56px,2.9vw) min(24px,1.25vw) min(40px,2.1vw);
  background:#fff;border:1px solid #E9E9E9;border-radius:min(14px,.73vw);
  transition:transform .35s cubic-bezier(.34,1.2,.64,1),box-shadow .35s,border-color .35s;
}
.st-card:hover{transform:translateY(-8px);border-color:#D8D8D8;box-shadow:0 16px 34px rgba(0,0,0,.08)}
.st-badge{
  position:absolute;right:min(20px,1.05vw);top:min(20px,1.05vw);
  padding:min(5px,.26vw) min(12px,.63vw);border-radius:5px;background:#1E1E1E;
  font-size:clamp(9px,.73vw,14px);font-weight:600;letter-spacing:.02em;color:#fff;
}
.st-img{width:auto;max-width:min(190px,9.9vw);height:min(150px,7.8vw);object-fit:contain;margin-bottom:min(28px,1.46vw)}
.st-name{font-size:clamp(14px,1.15vw,22px);font-weight:700;letter-spacing:-.02em;color:#111}
.st-desc{margin-top:min(14px,.73vw);font-size:clamp(11px,.94vw,18px);line-height:1.5;letter-spacing:-.02em;color:#777;text-align:center}

/* service cta */
.sv-cta{padding:0 0 clamp(90px,8.3vw,160px)}
.sc-box{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:min(56px,2.9vw) min(60px,3.13vw);border-radius:min(20px,1.05vw);background:#1E1E1E;
}
.sc-title{font-size:clamp(17px,1.77vw,34px);font-weight:700;letter-spacing:-.02em;color:#fff}
.sc-sub{margin-top:min(14px,.73vw);font-size:clamp(12px,1.04vw,20px);letter-spacing:-.02em;color:rgba(255,255,255,.65)}
.sc-btn{
  display:inline-flex;align-items:center;gap:min(22px,1.15vw);flex:none;
  padding:min(20px,1.05vw) min(32px,1.67vw);border-radius:min(10px,.52vw);background:#0400FF;
  font-size:clamp(13px,1.35vw,26px);font-weight:700;letter-spacing:-.02em;color:#fff;
  transition:background-color .2s,transform .2s;
}
.sc-btn:hover{background:#1A1AFF;transform:translateY(-2px)}
.sc-icon{
  width:1em;height:1em;background:currentColor;transition:transform .25s;
  -webkit-mask:url(/images/icon-arrow.svg) center/contain no-repeat;mask:url(/images/icon-arrow.svg) center/contain no-repeat;
}
.sc-btn:hover .sc-icon{transform:translate(3px,-3px)}

@media (max-width:1023px){
  .st-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .st-img{width:150px}
}
@media (max-width:767px){
  .st-list{grid-template-columns:1fr}
  .st-desc br{display:none}
  .sc-box{flex-direction:column;align-items:flex-start;gap:24px;padding:32px 24px}
  .sc-btn{padding:16px 24px;font-size:15px}
}

/* placements */
.sv-place{padding:0 0 clamp(100px,8.3vw,160px)}
.pl-stage{display:flex;align-items:center;min-height:100vh;padding:calc(var(--header-h) + clamp(30px,3.1vw,60px)) 0 clamp(30px,3.1vw,60px)}
.pl-stage .inner{width:100%}
.pc-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:min(25px,1.3vw);margin-top:min(56px,2.9vw)}
.pc-card{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  width:100%;aspect-ratio:402/659;max-height:calc(100vh - 340px);
  padding:min(32px,1.67vw) min(26px,1.35vw) min(128px,6.7vw);
  background:#fff;border-radius:min(11px,.57vw);box-shadow:0 4px 10px rgba(0,0,0,.13);
}
.pc-card::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(157.39deg,#409CFF -3.25%,#1123FF 103.39%);
  opacity:0;transition:opacity .55s ease;
}
.pc-card.is-on::before{opacity:1}
.pc-name{font-size:min(40px,2.08vw);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#000;transition:color .45s}
.pc-desc{margin-top:min(18px,.94vw);font-size:min(22px,1.15vw);font-weight:500;line-height:1.25;letter-spacing:-.02em;color:#000;transition:color .45s}
.pc-card.is-on .pc-name,.pc-card.is-on .pc-desc{color:#fff}
.pc-mock{
  flex:1 1 auto;min-height:0;width:82.8%;height:auto;margin:min(26px,1.35vw) auto 0;
  object-fit:contain;transform:scale(.96);opacity:0;
  transition:opacity .55s ease,transform .55s ease;
}
.pc-card.is-on .pc-mock{opacity:1;transform:scale(1)}
.pc-ico{
  position:absolute;right:min(54px,2.8vw);bottom:min(19px,1vw);
  display:grid;place-items:center;width:23.05%;aspect-ratio:1;border-radius:50%;
  background:rgba(104,182,255,.3);transition:background-color .45s;
}
.pc-card.is-on .pc-ico{background:rgba(255,255,255,.22)}
.pc-ico svg{width:58%;height:auto}

@media (max-width:1023px){
  .pl-stage{display:block;min-height:0;padding:clamp(60px,7vw,90px) 0 0}
  .pc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:32px}
  .pc-card{aspect-ratio:402/520;max-height:none;padding:24px 20px 86px;border-radius:12px}
  .pc-name{font-size:22px}
  .pc-desc{margin-top:12px;font-size:14px;line-height:1.45}
  .pc-mock{width:100%;margin-top:18px}
  .pc-ico{width:62px;right:20px;bottom:18px}
}
@media (max-width:560px){
  .pc-list{grid-template-columns:1fr}
  .pc-card{aspect-ratio:auto;padding:22px 20px 24px}
  .pc-name,.pc-desc{padding-right:58px}
  .pc-mock{flex:none;width:100%;height:auto}
  .pc-card:not(.is-on) .pc-mock{opacity:.45}
  .pc-ico{width:46px;top:20px;right:18px;bottom:auto}
}