/* v53 interactive service media section */

.service-motion-card[data-service-media]{
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}

.service-motion-card[data-service-media]:focus-visible{
  box-shadow:
    0 0 0 3px rgba(47,115,255,.18),
    inset 0 1px 0 #fff,
    0 16px 30px rgba(29,75,146,.14) !important;
}

.service-motion-card[data-service-media].is-selected{
  transform:translateY(-7px) scale(1.045) !important;
  border-color:rgba(47,115,255,.46) !important;
  box-shadow:
    0 0 0 3px rgba(47,115,255,.08),
    inset 0 1px 0 #fff,
    0 18px 34px rgba(29,75,146,.17) !important;
}

.service-motion-card[data-service-media].is-selected::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:8px;
  height:8px;
  border-right:2px solid #3478f6;
  border-bottom:2px solid #3478f6;
  transform:translateX(-50%) rotate(45deg);
}

.service-motion-card[data-service-media]{
  position:relative;
}

.service-interactive-layout{
  min-height:330px;
  transition:min-height .25s ease;
}

.service-empty-state{
  grid-column:1 / -1;
  min-height:330px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:44px 24px;
  border:1px dashed #d7e1ef;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 40%, rgba(51,112,245,.055), transparent 40%),
    linear-gradient(180deg,#fff,#fbfdff);
}

.service-empty-kicker{
  margin-bottom:10px;
  color:#3977f4;
  font-size:10px;
  font-weight:950;
  letter-spacing:.16em;
}

.service-empty-state strong{
  color:#10213d;
  font-size:24px;
  line-height:1.28;
  letter-spacing:-.035em;
}

.service-empty-state p{
  margin:10px 0 0;
  color:#738098;
  font-size:13px;
  line-height:1.7;
  letter-spacing:-.015em;
}

.service-media-panel{
  animation:servicePanelIn .32s ease both;
}

.service-media-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:17px;
  margin-bottom:4px;
  border-bottom:1px solid #e7edf5;
}

.service-media-mini-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:14px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.60),
    inset 0 -7px 13px rgba(0,0,0,.08),
    0 8px 16px rgba(24,58,107,.11);
  font-weight:950;
}

.service-media-mini-icon.naver{background:#03c75a;color:#fff;font-size:22px}
.service-media-mini-icon.kakao{background:#fee500;color:#251e00;font-size:0}
.service-media-mini-icon.kakao::before{
  content:"";
  width:25px;height:20px;
  border-radius:50%;
  background:#2a241d;
}
.service-media-mini-icon.kakao::after{
  content:"";
  position:absolute;
  width:8px;height:7px;
  margin:17px 0 0 -13px;
  background:#2a241d;
  clip-path:polygon(0 0,100% 0,30% 100%);
}
.service-media-mini-icon.kakao{position:relative}
.service-media-mini-icon.daangn{background:#fff3eb}
.service-media-mini-icon.daangn img{width:29px;height:29px;object-fit:contain}
.service-media-mini-icon.google{background:#fff;color:#4285f4;font:900 23px/1 Arial,sans-serif}
.service-media-mini-icon.meta{background:#eef5ff;color:#1877f2;font:900 29px/1 Arial,sans-serif}

.service-media-head-copy{
  min-width:0;
}

.service-media-head-copy span{
  display:block;
  color:#3676f4;
  font-size:9px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:.11em;
}

.service-media-head-copy h3{
  margin:4px 0 0;
  color:#0d1f3b;
  font-size:22px;
  line-height:1.2;
  letter-spacing:-.035em;
}

.service-media-head-copy p{
  margin:6px 0 0;
  color:#738098;
  font-size:12px;
  line-height:1.55;
}

.service-dynamic-list{
  margin-top:4px;
}

.service-dynamic-list > div{
  padding:16px 0;
  border-bottom:1px solid #e7edf5;
}

.service-dynamic-list > div:last-child{
  border-bottom:0;
}

.service-dynamic-list b{
  display:block;
  color:#12213c;
  font-size:14px;
  line-height:1.35;
  letter-spacing:-.025em;
}

.service-dynamic-list span{
  display:block;
  margin-top:5px;
  color:#68778f;
  font-size:12px;
  line-height:1.62;
  letter-spacing:-.012em;
}

.service-dynamic-how{
  display:flex;
  flex-direction:column;
}

.service-dynamic-step{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:12px;
  padding:15px 0;
  border-bottom:1px solid #e7edf5;
}

.service-dynamic-step:last-child{
  border-bottom:0;
}

.service-dynamic-step > span{
  color:#3478f6;
  font-size:13px;
  line-height:1.4;
  font-weight:950;
}

.service-dynamic-step b{
  display:block;
  color:#12213c;
  font-size:14px;
  line-height:1.35;
  letter-spacing:-.025em;
}

.service-dynamic-step p{
  margin:5px 0 0;
  color:#68778f;
  font-size:12px;
  line-height:1.62;
}

.service-dynamic-note{
  margin-top:14px;
  padding:13px 14px;
  border-radius:14px;
  background:#f3f7fd;
  color:#566780;
  font-size:11px;
  line-height:1.6;
}

.service-dynamic-note b{
  color:#275fd2;
}

@keyframes servicePanelIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:760px){
  .service-interactive-layout,
  .service-empty-state{
    min-height:285px;
  }

  .service-empty-state{
    padding:34px 18px;
    border-radius:20px;
  }

  .service-empty-state strong{
    font-size:21px;
  }

  .service-media-head-copy h3{
    font-size:20px;
  }

  .service-dynamic-list > div,
  .service-dynamic-step{
    padding:13px 0;
  }
}

@media(prefers-reduced-motion:reduce){
  .service-media-panel{
    animation:none;
  }
}