/* CSS 변수 정의 */
:root {
  --primary-gradient: linear-gradient(135deg, #b21e23 0%, #e74c3c 50%, #c0392b 100%);
  --secondary-gradient: linear-gradient(135deg, #b21e23 0%, #e67e22 100%);
  --success-gradient: linear-gradient(135deg, #b21e23 0%, #27ae60 100%);
  --info-gradient: linear-gradient(135deg, #b21e23 0%, #3498db 100%);
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.18);
  --shadow-soft: 2px 2px 18px rgba(85, 85, 86, 0.37);
  --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.1);
  --border-radius: 16px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
}

/* 인트로 영역 header 다르게 처리 */

/* header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
} */

header.scrolled {
  position: sticky;
}

/* 메인 비주얼 슬라이더 스타일 */
.main-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #e6a69c;
}

.main-visual-content {
  position: relative;
  width: 100%;
  height: 720px;
  max-width: 1920px;
  margin: 0 auto;
}

.main-visual-content img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 태블릿 반응형 */
@media (max-width: 1320px) {
  .main-visual-content {
    height: auto;
  }
}

/* 작은 태블릿 반응형 */
@media (max-width: 768px) {
  .main-visual-content img {
    content: url('../images/main_visual_m.webp');
  }
}