/* ============================================
   스크롤 헤더 효과 (메인 페이지만)
   ============================================ */

/* 기본 스타일 - 서브 페이지용 (흰색 배경) */
body {
  padding-top: 0 !important;
}

header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: #fff !important;
  box-shadow: 0px 1px 5px -2px #ccc !important;
  transition: all 0.4s ease;
  z-index: 1000 !important;
}

.logo img {
  transition: all 0.4s ease;
}

.navi li a {
  color: #333 !important;
  transition: all 0.4s ease;
}

/* ============================================
   메인 페이지 전용 - body에 main-page 클래스 추가 시
   ============================================ */

/* 메인 페이지 최상단 (투명 배경 + 흰색) */
body.main-page header {
  background: transparent !important;
  box-shadow: none !important;
}

body.main-page .navi li a {
  color: #ffffff !important;
}

/* 메인 페이지 스크롤 시 (원래 스타일로) */
body.main-page header.scrolled {
  background: #fff !important;
  box-shadow: 0px 1px 5px -2px #ccc !important;
}

body.main-page header.scrolled .navi li a {
  color: #333 !important;
}

body.main-page header.scrolled .navi li a:hover {
  color: #4285f4 !important;
}

/* 슬라이드 이미지 - 헤더 뒤로 배치 */
.imgslide {
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
}

/* 첫 번째 콘텐츠 영역 여백 */
.art1 {
  margin-top: 120px;
}

/* ============================================
   모바일 (800px 이하) - 스크롤 효과 없음
   ============================================ */

@media screen and (max-width: 800px) {
  body {
    padding-top: 90px !important;
  }

  header {
    background: #fff !important;
    box-shadow: 0px 1px 5px -2px #ccc !important;
  }

  .mmenu {
    background: #fff;
  }

  .mlogo img {
    filter: none;
  }

  .hamburger {
    color: #333;
  }

  .imgslide {
    margin-top: 0 !important;
  }

  .art1 {
    margin-top: 60px;
  }
}