/* ========================================
   difference.css - 8. 배움은 다르다 섹션
   ======================================== */

.difference {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  padding: 100px 16px;
  text-align: center;
}

.difference__inner {
  width: 100%;
  max-width: 1200px;
}

/* 타이틀 */
.difference__title {
  font-family: var(--font-pretendard);
  font-weight: 500;
  font-size: 54px;
  color: #000;
  letter-spacing: -5px;
  margin-bottom: 30px;
}

.difference__subtitle {
  display: inline-block;
  padding: 20px 25px;
  margin: 30px auto 40px;
  font-family: var(--font-pretendard);
  font-size: 24px;
  color: #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

/* 카드 그리드 */
.difference__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  gap: 0;
}

/* 카드 공통 */
.difference__card {
  width: 390px;
  padding: 30px 40px;
  margin: 5px;
  background: #f4f5f8 url("../assets/icon_gray1.png") no-repeat 93% 80%;
  text-align: left;
}

.difference__card--02 { background-image: url("../assets/icon_gray2.png"); }
.difference__card--03 { background-image: url("../assets/icon_gray3.png"); }
.difference__card--04 { background-image: url("../assets/icon_gray4.png"); }
.difference__card--05 { background-image: url("../assets/icon_gray5.png"); }
.difference__card--06 { background-image: url("../assets/icon_gray6.png"); }

.difference__label {
  font-family: var(--font-pretendard);
  font-size: 21px;
  color: #0090d3;
  letter-spacing: -2px;
}

.difference__heading {
  display: block;
  font-family: var(--font-pretendard);
  font-size: 30px;
  font-weight: 700;
  color: #000;
  letter-spacing: -3px;
  margin: 5px 0 15px;
}

.difference__desc {
  font-family: var(--font-pretendard);
  font-size: 15px;
  color: #000;
  line-height: 1.2;
}

.difference__note {
  font-family: var(--font-pretendard);
  font-size: 14px;
  color: #808896;
  margin-top: 15px;
}

/* --- 모바일 (~767px) --- */
@media (max-width: 767px) {
  .difference {
    padding: 50px 2.5%;
  }

  .difference__inner {
    width: 95%;
  }

  .difference__title {
    font-size: 28px;
    letter-spacing: -1px;
    margin-bottom: 12px;
  }

  .difference__subtitle {
    padding: 2vw 5vw;
    margin: 3vw auto 12vw;
    font-size: 4vw;
    border-width: 0.2vw;
  }

  .difference__grid {
    gap: 0;
  }

  .difference__card {
    width: 100%;
    padding: 3vw 0;
    padding-left: 22vw;
    margin: 1vw 0;
    background-position: 5% center;
    background-size: 14vw;
  }

  .difference__label {
    font-size: 4.5vw;
    letter-spacing: -0.2vw;
  }

  .difference__heading {
    font-size: 6.5vw;
    letter-spacing: -0.5vw;
    margin: 0 0 2vw;
  }

  .difference__desc {
    font-size: 3.8vw;
    line-height: 1.3;
  }

  .difference__note {
    font-size: 3.5vw;
    margin-top: 2vw;
  }
}