/* 기본 설정 */
body {
  margin: 0;
  background-color: black;
  color: white;
  font-family: 'Noto Sans KR', sans-serif;
}

.page-wrapper {
  position: relative;
  width: 100%;
  background-color: black;
  overflow: hidden;
}

/* 상단 이미지와 그라데이션 효과 */
.page-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px; /* 이미지 높이 조절 가능 */
  background: 
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.5) 60%,
      rgba(0, 0, 0, 1) 100%
    ),
    url('https://cdn-az.allevents.in/events8/banners/e72fb830-0fef-11f0-9e27-ff1e12d8cd5b-rimg-w1200-h515-dcdcdcdc-gmir.webp?v=1743618354'); /* 실제 이미지 경로로 교체하세요 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 100;
  filter: blur(0px); /* 블러 효과 유지 */
  transform: scale(1.05); /* 블러 경계 흐릿하게 */
}

/* 인트로 콘텐츠 (이미지 위에 올라가는 영역) */
.intro-content {
  position: relative;
  padding-top: 200px;
  padding-bottom: 300px;
  text-align: center;
  z-index: 1;
}

/* 콘텐츠 영역 (아래쪽 자유 배치) */
.main-content {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* 개별 콘텐츠 블럭 */
.content-block {
  background-color: rgba(255, 255, 255, 0.05); /* 약간 반투명 강조 */
  padding: 30px;
  margin-bottom: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}

.content-block:hover {
  transform: translateY(-4px);
}