@charset "UTF-8";
/* =========================================================
   토스 리디자인 시안 — page-services.css (services.html 전용)
   style.css → sub.css 다음에 불러온다. 토큰·컴포넌트는 그대로 쓰고 배치만 보정한다.

   1. 히어로 그림: 여섯 서비스 아이콘 타일
   2. 기능 행 보정 (반전 행 비율, 글 영역 안 목록 간격)
   3. 기능 행 아래 블록 (송금 절차, 비교 카드)
   4. 반응형 · 감속 모션
   ========================================================= */

/* ---------- 1. 히어로 그림 ---------- */
/* 블루 면(.sub-hero__art) 위에 앱 아이콘 같은 흰 타일 6개를 3 x 2로, 가운데 열만 살짝 내려 리듬을 줌 */
.svc-art__grid {
  display: grid;
  grid-template-columns: repeat(3, 84px);
  gap: 16px;
  transform: rotate(-6deg);
}
.svc-art__tile {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 24px;
  background: #fff;
  color: var(--blue-500);
  box-shadow: 0 16px 32px rgba(0, 40, 120, .2);
}
.svc-art__tile:nth-child(3n + 2) { transform: translateY(20px); }
.svc-art__tile .ico { width: 40px; height: 40px; stroke-width: 1.8; }
/* 첫 타일(송금)만 블루 면 위의 연한 블루로 강조 → 아래 첫 섹션과 연결 */
.svc-art__tile:first-child { background: var(--blue-50); }

/* ---------- 2. 기능 행 보정 ---------- */
/* (반전 행의 7:5 칸 비율은 sub.css의 .feature--reverse로 옮김) */
.feature__text .info-list,
.feature__text .svc-timeline { margin-top: 32px; }
.feature__text .info-list__row { grid-template-columns: 140px minmax(0, 1fr); }

/* 글 영역 안 세로 절차는 조금 촘촘하게 */
.svc-timeline { gap: 24px; }
.svc-timeline .timeline__title { font-size: 1.1875rem; }
.svc-timeline .timeline__desc { margin-top: 4px; font-size: 1rem; }

/* ---------- 3. 기능 행 아래 블록 ---------- */
.svc-steps,
.svc-cards { margin-top: 88px; }
.svc-steps > .sub-h3,
.svc-cards > .sub-h3 { margin-bottom: 24px; }

/* h3 아래 단계·카드 제목은 h4 (기본 여백은 style.css 초기화가 0으로, 위 여백은 sub.css 규칙 그대로) */

/* 비교 카드: 아이콘 아래 제목 간격은 sub.css 규칙 사용, 카드 높이 맞춤 */
.svc-cards .s-card { height: 100%; }

/* ---------- 4. 반응형 ---------- */
@media (max-width: 1023px) {
  .svc-art__grid { grid-template-columns: repeat(3, 52px); gap: 10px; }
  .svc-art__tile { width: 52px; height: 52px; border-radius: 16px; box-shadow: 0 10px 20px rgba(0, 40, 120, .2); }
  .svc-art__tile:nth-child(3n + 2) { transform: translateY(12px); }
  .svc-art__tile .ico { width: 26px; height: 26px; }

  .svc-steps,
  .svc-cards { margin-top: 72px; }
}

/* 태블릿: 송금 3단계·비교 카드 3장은 2열로 두면 마지막 하나가 혼자 남으므로 3열 유지 */
@media (min-width: 768px) and (max-width: 1023px) {
  .svc-steps .process,
  .svc-cards .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .svc-steps .process__step { padding: 24px 20px; }
  .svc-cards .s-card { padding: 24px 20px; }
  .svc-cards .s-card__title { font-size: 1.25rem; }
  .svc-cards .s-card__desc { font-size: 1rem; }
}

@media (max-width: 767px) {
  .feature__text .info-list__row { grid-template-columns: 1fr; }
  .svc-steps,
  .svc-cards { margin-top: 56px; }
  .svc-steps > .sub-h3,
  .svc-cards > .sub-h3 { margin-bottom: 16px; }
  .svc-timeline { gap: 20px; }
  .svc-timeline .timeline__title { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-art__grid { transform: none; }
}