/* yjh.css — section-title 범위 전용 스타일 */

/* 폰트 임포트는 유지해도 전역 영향 없음 */
@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600;700&display=swap');

/* 색 변수는 이 파일 내부 계산용이라면 그대로 두어도 무방하지만
   전역 오염을 막고 싶다면 :root 대신 .section-title에 커스텀 속성으로 보관 가능 */
.section-title {
  --accent: #e86b93;
  --text-dark: #1a1a1a;
  --white: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.3);
  --shadow: rgba(0, 0, 0, 0.2);

  position: relative;
  z-index: 1;
  text-align: center;

  /* 기존 yjh.css의 body 배경 대신 section 내부 배경으로만 적용 */
  padding: 10px 40px 60px;
background: linear-gradient(180deg, #ffffff 0%, #f8e9ec 100%);

}



/* 🔆 배경 오버레이 (섹션 내부에서만) */
.section-title .bg-overlay {
  position: absolute;   /* 기존 fixed → absolute 로 변경하여 섹션에만 한정 */
  inset: 0;
  background: none;
  backdrop-filter: blur(8px);
  z-index: 0;
}

/* 텍스트들 */
.section-title .main-title {
  position: relative;
  z-index: 1;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #111111;
  margin-bottom: 8px;
}

.section-title .subtitle {
  position: relative;
  z-index: 1;
  font-size: 16px;
  color: #666;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 80px;
}

/* ----------------------------------
   포트폴리오 그리드 (섹션 한정)
---------------------------------- */
.section-title .portfolio-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 80px;
  max-width: 1050px;
  margin: 0 auto;
}

.section-title .portfolio-item {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 30px var(--shadow);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  backdrop-filter: blur(6px);
}

.section-title .portfolio-item:hover {
  transform: translateY(-12px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.section-title .portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  filter: brightness(0.92);
}

.section-title .portfolio-item:hover img {
  transform: scale(1.08);
  filter: brightness(1);
}

/* Hover 텍스트 */
.section-title .info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: rgba(0, 0, 0, 0.55);
  transition: opacity 0.5s ease;
}

.section-title .info h3 {
  color: var(--white);
  font-size: 20px;
  margin: 0;
  letter-spacing: 0.5px;
}

.section-title .info span {
  color: #f9d7e2;
  font-size: 14px;
  margin-top: 6px;
}

.section-title .portfolio-item:hover .info {
  opacity: 1;
}

/* ----------------------------------
   반응형 (섹션 한정)
---------------------------------- */
@media (max-width: 768px) {
  .section-title {
    padding: 80px 20px 120px;
  }
  .section-title .main-title {
    font-size: 32px;
  }
  .section-title .subtitle {
    font-size: 13px;
    margin-bottom: 40px;
  }
  .section-title .portfolio-grid {
    gap: 30px;
    padding: 0 0; /* 필요시 0~20px로 조절 */
  }
}

/* purple.css 또는 yjh.css 맨 아래에 추가 */
.section-title.container {
  padding-inline: 0 !important;
  width: 100%;
  max-width: none;
}