@charset "UTF-8";
/* =============================================================
   service.css
   /service/* 페이지 전용 — 기존 common.css 에 없는 요소만 정의한다.
   폰트/컬러/여백 스케일은 common.css 값을 그대로 승계한다.
   신규 색상·신규 폰트 크기 정의 금지.
   ============================================================= */

/* -------------------------------------------------------------
   1. 리드 문단
   main__desc(3.2rem) 아래에 붙는 보조 문단.
   common.css 의 .main__txt-list li 와 동일한 2.3rem 을 승계한다.
   ------------------------------------------------------------- */
.svc-lead {
  margin-top: 3rem;
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1.6;
  color: #A6A6A6;
  letter-spacing: 0.02em;
}
.svc-lead strong {
  color: white;
  font-weight: 700;
}

/* -------------------------------------------------------------
   2. 스펙 표 (dl)
   .main__contents 의 max-width:1250px / width:85% / margin 규칙을 승계.
   배경·블러는 .main__item 값과 동일.
   ------------------------------------------------------------- */
.svc-spec {
  max-width: 1250px;
  width: 85%;
  margin: 100px auto 0;
  background-color: rgba(43, 44, 48, 0.0509803922);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow: hidden;
}
.svc-spec__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.svc-spec__row:last-child {
  border-bottom: 0;
}
.svc-spec dt {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 24rem;
  padding: 2.4rem 3rem;
  font-size: 2.3rem;
  font-weight: 700;
  color: white;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.svc-spec dd {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 2.4rem 3rem;
  font-size: 2.3rem;
  font-weight: 500;
  color: #A6A6A6;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------
   3. 강조 블록
   ------------------------------------------------------------- */
.svc-note {
  max-width: 1250px;
  width: 85%;
  margin: 30px auto 0;
  padding: 3.7rem 3rem;
  background-color: rgba(43, 44, 48, 0.0509803922);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
}
.svc-note p {
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1.6;
  color: #A6A6A6;
  letter-spacing: 0.02em;
}
.svc-note strong {
  color: white;
  font-weight: 700;
}
.svc-note--result,
.svc-note--cta {
  text-align: center;
}
/* CTA 블록만 좌측 그라데이션 라인으로 구분 — common.css 그라데이션 값 승계 */
.svc-note--cta {
  border-left: 4px solid transparent;
  border-image: -webkit-gradient(linear, left top, left bottom, color-stop(13%, rgb(2, 88, 169)), color-stop(59%, rgb(63, 146, 224)));
  border-image: linear-gradient(180deg, rgb(2, 88, 169) 13%, rgb(63, 146, 224) 59%) 1;
  border-radius: 0;
}

/* -------------------------------------------------------------
   4. .main__contents 를 연속으로 두 번 배치할 때의 상단 여백 보정
   (contents-3row 는 3열 고정이므로 6개 항목은 블록 2개로 나눠 쓴다)
   ------------------------------------------------------------- */
.svc-contents--next {
  margin-top: 30px;
}

/* -------------------------------------------------------------
   5. .main__list 를 wFull(중앙정렬) 헤더 안에서 쓸 때
   ------------------------------------------------------------- */
.main__header.wFull .main__list.svc-list--center li {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* .main__list li 기본값 3rem 은 6줄 연속에 과해 이 페이지에서만 축소.
     2.3rem 은 .svc-lead / .svc-spec / .svc-note 와 동일한 승계 값이다. */
  font-size: 2.3rem;
}

/* -------------------------------------------------------------
   6. 관련 서비스 링크
   .main__item 의 배경/블러 값을 그대로 승계한다.
   ------------------------------------------------------------- */
.svc-related {
  max-width: 1250px;
  width: 85%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}
.svc-related__item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: block;
  padding: 3.7rem 3rem;
  background-color: rgba(43, 44, 48, 0.0509803922);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.svc-related__item:hover {
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}
.svc-related__label {
  display: block;
  font-size: 2.3rem;
  font-weight: 700;
  color: white;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.svc-related__title {
  display: block;
  margin-top: 1.2rem;
  font-size: 2.3rem;
  font-weight: 500;
  color: #A6A6A6;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* =============================================================
   반응형 — common-media.css 의 기존 breakpoint(1024px / 768px) 준수
   ============================================================= */
@media (max-width: 1024px) {
  .svc-spec,
  .svc-note {
    width: 100%;
    padding-left: 28px;
    padding-right: 28px;
  }
  .svc-spec {
    padding-left: 0;
    padding-right: 0;
  }
  .svc-spec dt {
    width: 20rem;
  }
  .svc-contents--next {
    margin-top: 0;
  }
  .svc-related {
    width: 100%;
    padding: 0 28px;
  }
}
@media (max-width: 768px) {
  .svc-spec__row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .svc-spec dt {
    width: 100%;
    padding-bottom: 0;
  }
  .svc-spec dd {
    padding-top: 1rem;
  }
  .svc-related {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}