@font-face { 
  font-family: 'Aggravo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
  font-weight: 300;
}
@font-face {
  font-family: 'Aggravo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'Aggravo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
  font-weight: 700;
}

/* 섹션 범위 + 위아래 여백 */
.section-title {
  font-family: 'Aggravo', sans-serif;
  background: #fff;
  padding-block: 70px; /* 위아래 여백 */
  margin-top: 120px;    /* 섹션 전체를 아래로 */
  overflow: visible;    /* ✅ CD 이미지 안 잘리게 */
}


/* 가로 정렬 유지 */
.section-title .contain {
  display: flex;
  flex-direction: row;   /* ✅ 가로 고정 */
  justify-content: center;
  align-items: center;
  gap: 120px;
}

/* 카드: 배경은 ::before로 올림(앞 레이어) */
.section-title .card {
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 20px;
  color: var(--card-color, #fff);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.3;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: visible;           /* 카드 밖으로 CD가 나와도 보이게 */
  transition: transform 0.4s ease, filter 0.4s ease;
  z-index: 0;                  /* 스택 컨텍스트 생성 */
  background: transparent;     /* 배경은 ::before에서 처리 */
}

/* 카드 배경/모서리(앞 레이어) */
.section-title .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: var(--card-bg, #222); /* 각 카드 색상 */
  z-index: 1;                        /* ✅ CD보다 앞, 텍스트보다 뒤 */
}

/* 텍스트는 맨 위 */
.section-title .card span {
  position: relative;
  z-index: 2;                        /* ✅ 텍스트 최상단 */
}

/* CD: 카드 뒤 레이어(하지만 카드 경계 밖은 보임) */
.section-title .cd {
  position: absolute;
  bottom: -40px;
  left: 50%;
  width: 200px;
  opacity: 0;
  transform: translateX(-50%) translateY(60px) scale(0.9);
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.25));
  transition: transform 1s cubic-bezier(0.45, 1.45, 0.4, 1), opacity 1s cubic-bezier(0.45, 1.45, 0.4, 1);
  z-index: 0;                        /* ✅ 카드 배경(::before)보다 뒤 */
  pointer-events: none;
}

/* hover 시 CD 올라오고 회전 */
.section-title .card:hover .cd {
  opacity: 1;
  transform: translateX(-50%) translateY(-160px) scale(1);
  animation: cdRotate 6s linear infinite;
}

/* hover 해제 시 */
.section-title .card:not(:hover) .cd {
  opacity: 0;
  transform: translateX(-50%) translateY(60px) scale(0.9);
  animation: cdHide 0.8s ease forwards;
}

/* 회전 */
@keyframes cdRotate {
  from { transform: translateX(-50%) translateY(-160px) rotate(0deg) scale(1); }
  to   { transform: translateX(-50%) translateY(-160px) rotate(360deg) scale(1); }
}

/* 들어가며 숨김 */
@keyframes cdHide {
  from { transform: translateX(-50%) translateY(-160px) rotate(0deg) scale(1); opacity: 1; }
  to   { transform: translateX(-50%) translateY(60px) rotate(-20deg) scale(0.9); opacity: 0; }
}

/* 색상 세트 (커스텀 프로퍼티로 통일) */
.section-title .graphic { --card-bg: #C6F347; --card-color: #222; }
.section-title .video   { --card-bg: #2D323C; --card-color: #fff; }
.section-title .ad      { --card-bg: #C58CFF; --card-color: #222; }

/* 인터랙션 */
.section-title .card:hover  { transform: translateY(-10px); }
.section-title .card:active { transform: scale(0.97); }

/* 반응형: 가로 유지, 여백은 축소 */
@media (max-width: 900px) {
  .section-title { padding-block: 64px; } /* 모바일에서 여백 살짝 줄임 */
  .section-title .contain { gap: 60px; }  /* 가로 유지 */
  .section-title .card { width: 80vw; height: 160px; }
  .section-title .cd { width: 150px; }
}

/* ==== CD 낙하 거리/속도 튜닝 ==== */
/* 필요하면 숫자만 바꿔서 미세조정하세요 */
.section-title {
  --cd-rest-offset: 20px;     /* 숨김 상태에서 아래로 내리는 거리 (기본 60px → 20px) */
  --cd-rise-height:  -150px;  /* hover 시 위로 올라오는 높이 (기본 -160px → -150px) */
  --cd-enter-duration: 0.6s;  /* 등장 속도 (기본 1s → 0.6s) */
  --cd-exit-duration:  0.45s; /* 사라지는 속도 (기본 0.8s → 0.45s) */
}

/* 숨김 상태 위치/속도 단축 */
.section-title .cd {
  transform: translateX(-50%) translateY(var(--cd-rest-offset)) scale(0.9);
  transition:
    transform var(--cd-enter-duration) cubic-bezier(0.45, 1.45, 0.4, 1),
    opacity   var(--cd-enter-duration) cubic-bezier(0.45, 1.45, 0.4, 1);
  will-change: transform, opacity;
}

/* hover 시 올라오는 높이도 살짝 완만하게 */
.section-title .card:hover .cd {
  opacity: 1;
  transform: translateX(-50%) translateY(var(--cd-rise-height)) scale(1);
  animation: cdRotate 6s linear infinite;
}

/* hover 해제 시 더 빨리/덜 내려가게 */
.section-title .card:not(:hover) .cd {
  opacity: 0;
  transform: translateX(-50%) translateY(var(--cd-rest-offset)) scale(0.9);
  animation: cdHide var(--cd-exit-duration) ease forwards;
}

/* 내려가는 애니메이션도 거리/시간 맞춤 */
@keyframes cdHide {
  from { transform: translateX(-50%) translateY(var(--cd-rise-height)) rotate(0deg) scale(1); opacity: 1; }
  to   { transform: translateX(-50%) translateY(var(--cd-rest-offset)) rotate(-20deg) scale(0.9); opacity: 0; }
}

/* 접근성: 모션 줄이기 존중 */
@media (prefers-reduced-motion: reduce) {
  .section-title .cd,
  .section-title .card:hover .cd,
  .section-title .card:not(:hover) .cd {
    transition: opacity 0.25s linear !important;
    animation: none !important;
    transform: translateX(-50%) translateY(var(--cd-rest-offset)) scale(0.95) !important;
  }
}