html {
  scroll-behavior: smooth;
}

.container.section-title {
  margin: 50px;                 /* 🔥 위아래 기본 여백 제거 */
  padding: 0;                /* 🔥 내부 여백 제거 */
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: auto;          /* 🔥 100vh로 강제 채우지 않게 변경 */
}

/* ===== 메인 이미지 컨테이너 ===== */
.container.section-title .main-wrapper {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* 배경 이미지 (잘리지 않게 유지) */
.container.section-title .main-wrapper::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%; /* 원래 비율 유지 */
  background: url("../ljh/vywlvks.png") center / contain no-repeat;
}

/* ===== 배지 공통 ===== */
.container.section-title .badge {
  position: absolute;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
  transition: transform 0.22s ease, filter 0.22s ease;
  z-index: 2; /* 배경 위로 */
  cursor: pointer;
}

.container.section-title .badge img {
  display: block;
  height: auto;
  width: clamp(120px, 18vw, 210px);
  user-select: none;
  -webkit-user-drag: none;
}

.container.section-title .badge:hover {
  transform: translate(-50%, -50%) scale(1.06);
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45));
}

/* ✅ 배치 좌표 (직접 조정 가능) */
.container.section-title .badge.multimedia { left: 12%; top: 40%; }
.container.section-title .badge.graphic    { left: 50%; top: 5%; }
.container.section-title .badge.advertising{ left: 85%; top: 50%; }

/* ===== 모바일 대응 ===== */
@media (max-width: 720px) {
  .container.section-title {
    flex-direction: column;
    padding-top: 50px;
  }

  .container.section-title .main-wrapper {
    width: 95%;
    min-height: 300px; /* ✅ 모바일에서도 배경 높이 유지 */
    background-size: cover; /* 모바일 화면에 맞게 채움 */
  }

  /* ✅ 여전히 배경 위에 겹치도록 absolute 유지 */
  .container.section-title .badge {
    position: absolute;
  }
}