@charset "utf-8";
.section-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0d6efd;
    margin-bottom: 1rem;
  }
  .item-card {
    text-align: center;
    margin-bottom: 1.5rem;
  }    
  .item-card img {
  width: 100%;       /* 컨테이너 너비에 맞게 반응형 */
  max-width: 200px;  /* 최대 200px까지만 확장 */
  height: auto;
  margin-bottom: 0.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  }

  /* 모바일 뷰에서 row 사이 간격 조정 */
  @media (max-width: 576px) {
  .row.g-4 {
      --bs-gutter-x: 0.5rem; /* 좌우 여백 줄임 */
      --bs-gutter-y: 1rem;   /* 위아래 여백 적당히 */
  }
  }
  .item-text{
    font-size:small;
    min-height:40px;
  }
  .price {
    font-weight: bold;
    color: #ff4c4c;
  }
  .header-banner {
    text-align: center;
    padding: 2rem 1rem 1rem;
  }
  .header-banner h3 {
    font-weight: bold;
    font-size: 1.8rem;
  }
  .gradient-text {
    background: linear-gradient(to right, #0aa7d8, #5b84ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .note {
    font-size: 0.8rem;
    color: #888;
    text-align: left; /* 좌측 정렬로 변경 */
    margin-top: 2rem;
    padding: 0 1rem;
  }


/* 상단 combined container */
.combined-container {
max-width: 1320px;
margin: 0 auto 60px auto;
padding: 40px 20px;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* 메인 정보 container */
.main-container {
background-color: #fff;
border-radius: 20px;
padding: 3rem 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
max-width: 1320px;
margin: 0 auto 60px auto;
}

/* 공통 하단 여백 */
.main-container,
.combined-container {
margin-bottom: 60px;
}


body {
  background-color: #f5faff;
  font-family: 'Noto Sans KR', sans-serif;
}


.repair-banner {
  text-align: center;
  margin-bottom: 3rem; /* 이미지와의 간격 증가 */
}

.repair-banner .subtitle {
  font-size: 1.5rem;
  font-weight: 500;
  color: #333;
}

.repair-banner .main-text {
  font-size: 2.5rem;
  font-weight: 900;
  color: #000;
  line-height: 1.2;
}

.repair-banner .main-text span {
  display: inline-block;
  margin: 0 0.25rem;
}

.gradient-text {
  background: linear-gradient(to right, #41c1f2, #7f8bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon {
  font-size: 2rem;
  vertical-align: middle;
  margin: 0 0.25rem;
}

.image-wrapper {
  width: 100%;
  max-width: 800px; /* 이미지 최대 가로 사이즈 */
  aspect-ratio: 3 / 2; /* 6:4 비율 */
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  margin: 50px auto; /* 상하 여백 크게, 가운데 정렬 */
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  padding: 2rem;
}

@media (max-width: 768px) {
  .repair-banner .main-text {
    font-size: 2rem;
  }
}