/* 이용 방법(순서 + 통화 시간 그림), 안전·개인정보 원칙(수신 전용 도식), 운영사 정보(공시처럼 담백한 기록표) */

/* 이용 방법: 실제 순서라서 숫자를 크게 쓴다 */
.steps {
  display: grid;
  gap: var(--s-6);
}

.step {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding-left: 4rem;
}

.step-num {
  position: absolute;
  top: -0.05em;
  left: 0;
  font-size: var(--t-step-size);
  line-height: var(--t-step-lh);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.step p {
  color: var(--text-secondary);
}

/* 단계와 통화 시간 막대를 한 번에 보여 주는 움직이는 그림 */
.how-figure {
  max-width: 40rem;
  margin: var(--s-8) 0 0;
}

.how-note {
  margin-top: var(--s-5);
  color: var(--text-meta);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
}

@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s-6);
  }

  .step {
    padding-left: 0;
    padding-top: 5.25rem;
  }

  .step-num {
    top: 0;
  }
}

/* 안전·개인정보 원칙 */
.safety-grid {
  display: grid;
  gap: var(--s-7);
}

.flow {
  min-width: 0;
  margin: 0;
}

.principles {
  display: grid;
  gap: var(--s-6);
}

.principles li {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 2px solid var(--line-strong);
}

.principles p {
  color: var(--text-secondary);
}

@media (min-width: 48rem) {
  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-6);
  }
}

@media (min-width: 64rem) {
  .safety-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-5);
    align-items: start;
  }

  .flow {
    grid-column: 1 / span 5;
  }

  .principles {
    grid-column: 6 / -1;
  }
}

/* 운영사 정보: 공시처럼 담백한 기록표 */
.company-grid {
  display: grid;
  gap: var(--s-7);
}

.company-intro {
  display: grid;
  align-content: start;
  gap: var(--s-4);
}

.company-intro .action-row {
  margin-top: var(--s-2);
}

.record {
  border-top: 2px solid var(--line-strong);
}

.record div {
  display: grid;
  gap: 2px;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.record dt {
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--text-meta);
}

.record dd {
  font-size: var(--t-lead-size);
  line-height: var(--t-lead-lh);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.record a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  text-decoration: none;
}

.record a:hover {
  text-decoration: underline;
}

@media (min-width: 40rem) {
  .record div {
    grid-template-columns: 10rem minmax(0, 1fr);
    column-gap: var(--s-5);
    align-items: baseline;
  }
}

@media (min-width: 64rem) {
  .company-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-5);
  }

  .company-intro {
    grid-column: 1 / span 4;
  }

  .record {
    grid-column: 6 / -1;
  }
}