@font-face {
  font-family: 'Sweet';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

/* 섹션 내부만 폰트, 배경 적용 */
.container.section-title {
  font-family: 'Sweet', 'Helvetica Neue', Arial, sans-serif;
  color: #333333;
  
  /* ✅ 화면 전체 너비 + 배경 그라데이션 */
  width: 100vw;
  margin: 0;
  padding: 100px 0 80px;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* ✅ 위는 흰색 → 아래로 갈수록 f5f5f5 */
  background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
  text-align: center;
}

/* 🔹 제목 스타일 */
.container.section-title h2 {
  font-size: 2.8em;
  font-weight: 300;
  margin-bottom: 20px;
  letter-spacing: 0.03em;
  color: #222;
  animation: fadeDown 1.2s ease forwards;
  opacity: 0;
}

/* 🔹 부제목/설명 텍스트 */
.container.section-title p {
  font-size: 1.1em;
  font-weight: 400;
  color: #555;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto 60px;
  animation: fadeDown 1.5s ease forwards;
  opacity: 0;
}

/* 🔹 글 등장 애니메이션 */
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === 내비게이션 교체본 === */
.container.section-title .navigation {
  text-align: center;
  padding: 40px 0 40px;
}

.container.section-title .navigation a {
  margin: 0 40px;
  display: inline-block;
  position: relative;          /* 텍스트 오버레이 기준점 */
  text-decoration: none;       /* 링크 밑줄 제거 */
  border-radius: 20px;
  overflow: hidden;            /* 확대 시 가장자리 클리핑 */
}

/* 버튼 이미지 */
.container.section-title .navigation img {
  width: 280px;
  height: 280px;
  display: block;
  border-radius: 20px;
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s, filter 0.3s ease;
  backface-visibility: hidden;
  z-index: 1;
}

/* 호버 효과: 확대 + 그림자 강화 + 어둡게 & 블러 */
.container.section-title .navigation a:hover img {
  transform: scale(1.1);
  box-shadow: 0 0 20px 8px rgba(0, 0, 0, 0.2);
  filter: brightness(0.6) blur(3px);
}

/* 오버레이 텍스트 (기본: 숨김) */
.container.section-title .navigation .nav-label {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #fff;                 /* 하얀 텍스트 */
  font-size: 1.8em;            /* 원본 요구사항과 맞춤 */
  font-weight: bold;
  font-family: 'Sweet', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;        /* 클릭 방해 X */
  z-index: 2;
  transition: opacity 0.3s ease;  /* 텍스트 페이드 인 */
  text-shadow: 0 2px 8px rgba(0,0,0,0.4); /* 배경 어두워졌을 때 가독성 보강 */
}

/* 호버 시 텍스트 표시 */
.container.section-title .navigation a:hover .nav-label {
  opacity: 1;
}

/* (선택) 반응형: 화면이 좁아지면 버튼 크기 축소 */
@media (max-width: 820px) {
  .container.section-title .navigation a {
    margin: 0 16px 24px;
  }
  .container.section-title .navigation img {
    width: 200px;
    height: 200px;
  }
  .container.section-title .navigation .nav-label {
    font-size: 1.4em;
  }
}

/* (접근성) 모션 최소화 환경 존중 */
@media (prefers-reduced-motion: reduce) {
  .container.section-title .navigation img {
    transition: none;
  }
  .container.section-title .navigation .nav-label {
    transition: none;
  }
}