@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root{
  --forest:#1B4332;
  --forest-deep:#0F2D22;
  --gold:#C9A227;
  --mint:#E9F0EB;
  --cream:#F6F4EE;
}

body{ width:100%; font-family:"Pretendard Variable", Pretendard, -apple-system,'Poppins'; padding:0; margin:0; font-size:medium;}
a { color: #000; text-decoration: none; }
a:hover { color: #1B4332 ; font-weight:500; }


/* 브랜드 컬러 유틸 (부트스트랩 클래스와 함께 사용) */
.bg-forest{ background-color:var(--forest) !important; }
.bg-forest-deep{ background-color:var(--forest-deep) !important; }
.bg-mint{ background-color:var(--mint) !important; }
.bg-cream{ background-color:var(--cream) !important; }
.text-forest{ color:var(--forest) !important; }
.text-forest-deep{ color:var(--forest-deep) !important; }
.text-gold{ color:var(--gold) !important; }

.btn-forest{ background-color:var(--forest); border-color:var(--forest); color:#fff; }
.btn-forest:hover{ background-color:var(--forest-deep); border-color:var(--forest-deep); color:#fff; }

/* ==========================================================================
   네비게이션 (GNB & 드롭다운 스타일 통합)
   ========================================================================== */
.navbar-brand small{ font-size:.72rem; }

/* 1. 라운드(border-radius) 일괄 제거 */
.navbar-nav .dropdown-menu,
.navbar-nav .dropdown-item {
  border-radius: 0 !important;
}

/* 2. 메인 링크 기본 스타일 */
.navbar-nav .nav-link {
  font-weight: 700;
  font-size: 120%;
  white-space: nowrap;
  color: #000000 !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  position: relative;
  transition: color 0.2s ease-in-out;
}

/* 3. PC 화면 (992px 이상) 전용 스타일 */
@media (min-width: 992px) {
  /* 드롭다운 상자 (샤프한 보더 & 상단 포인트 라인) */
  .navbar-nav .dropdown-menu {
    border: 1px solid var(--forest);
    border-top: 3px solid var(--forest);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
    margin-top: 0;
  }

  /* 드롭다운 메뉴 아이템 */
  .navbar-nav .dropdown-item {
    padding: 0.6rem 1.25rem;
    color: #444;
    transition: all 0.15s ease-in-out;
  }

  /* 드롭다운 호버 효과 */
  .navbar-nav .dropdown-item:hover,
  .navbar-nav .dropdown-item:focus,
  .navbar-nav .dropdown-item:active {
    background-color: #f8f9fa;
    color: var(--forest);
    font-weight: 600;
    padding-left: 1.5rem;
  }

  /* 메인 메뉴 호버 시 텍스트 색상만 변경 (하단 선 제거) */
  .navbar-nav .nav-item:hover > .nav-link {
    color: var(--forest) !important;
  }
}

/* ==========================================================================
   페이지 레이아웃 및 모듈
   ========================================================================== */

/* 히어로 캐러셀 */
#heroCarousel a {color:#fff !important;}
#heroCarousel a:hover {color:#000 !important;}
.hero-slide-bg{
  min-height:700px; background-size:cover; background-position:center 55%;
  position:relative; display:flex; align-items:center;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(15,45,34,.88) 0%, rgba(27,67,50,.65) 55%, rgba(15,45,34,.35) 100%);
}
.carousel-control-prev, .carousel-control-next{ width:5%; }

/* 슬라이드 원 메뉴 */
.hero-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45); border:none; padding:0; }
.hero-dot.active{ background:var(--gold); }

/* 퀵링크 Overlap */
.quicklinks-overlap{ position:relative; z-index:3; margin-top:-64px; }
.quicklink-title{ font-size:120%; }

/* 서브페이지 타이틀 섹션 배경사진 */
.sub-visual{
  position:relative; overflow:hidden;
  background-image:url('https://picsum.photos/seed/snuagria-sub/1600/500');
  background-size:cover; background-position:center 40%;
}
.sub-visual .hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(15,45,34,.88) 0%, rgba(27,67,50,.62) 60%, rgba(15,45,34,.4) 100%);
}

/* 게시판 리스트 위젯 */
.list-dashed li{ border-bottom:1px dashed #dee2e6; }
.list-dashed li:last-child{ border-bottom:none; }

/* 좌측 LNB / 리스트그룹 active */
.list-group-item.active{ background-color:var(--forest); border-color:var(--forest); }

/* 테이블 공지행 */
.table-notice{ background-color:var(--cream) !important; }

/* ==========================================================
   커스텀 페이징 스타일 (부트스트랩 기본 마크업 호환)
   ========================================================== */

/* 페이징 전체 컨테이너 버튼 간격 설정 */
.pagination { gap: 6px; }

/* 각 페이지 번호 버튼 기본 스타일 */
.pagination .page-item .page-link { min-width: 38px; }
.pagination .page-item .page-link { height: 38px; }
.pagination .page-item .page-link { display: flex; }
.pagination .page-item .page-link { align-items: center; }
.pagination .page-item .page-link { justify-content: center; }
.pagination .page-item .page-link { padding: 0 10px; }
.pagination .page-item .page-link { font-size: 0.9rem; }
.pagination .page-item .page-link { font-weight: 500; }
.pagination .page-item .page-link { color: #555555; }
.pagination .page-item .page-link { background-color: #ffffff; }
.pagination .page-item .page-link { border: 1px solid #e2e8f0; }
.pagination .page-item .page-link { border-radius: 6px !important; }
.pagination .page-item .page-link { transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); }
.pagination .page-item .page-link { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }

/* 마우스 오버(Hover) 상태 */
.pagination .page-item .page-link:hover { color: var(--forest); }
.pagination .page-item .page-link:hover { background-color: var(--mint); }
.pagination .page-item .page-link:hover { border-color: var(--forest); }
.pagination .page-item .page-link:hover { transform: translateY(-1px); }

/* 현재 활성화된 페이지(Active) 상태 */
.pagination .page-item.active .page-link { background-color: var(--forest) !important; }
.pagination .page-item.active .page-link { border-color: var(--forest) !important; }
.pagination .page-item.active .page-link { color: #ffffff !important; }
.pagination .page-item.active .page-link { font-weight: 700; }
.pagination .page-item.active .page-link { box-shadow: 0 3px 6px rgba(27, 67, 50, 0.25); }

/* 클릭 포커스 시 파란 테두리 아웃라인 정리 */
.pagination .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(27, 67, 50, 0.15); }


/* 맨 위로 버튼 */
#backToTop{
  position:fixed; right:24px; bottom:24px; width:46px; height:46px; z-index:1030;
  display:none; align-items:center; justify-content:center;
}

/* 관련사이트 탭 스타일 */
.custom-site-tabs .nav-link {
  color: #555;
  background-color: #e9ecef;
  border-radius: 20px;
  transition: all 0.2s ease-in-out;
}
.custom-site-tabs .nav-link.active {
  background-color: #1e3a5f;
  color: #fff;
}

/* 배너 카드 호버 효과 */
.site-banner-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.site-banner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* 팝업 레이어가 상단 고정 메뉴(sticky-top)에 가리지 않도록 수정 */
.hd_pops, #hd_pops { z-index: 1050 !important; }
#hd_pop { position: relative;  z-index: 9999 !important;}

/* ==========================================================================
   모바일 반응형 보정 (통합)
   ========================================================================== */
@media (max-width: 991.98px) {
  .logo-img { max-width:80% !important; }
  .navbar-toggler:focus { box-shadow:none; outline:none; }
  .navbar-toggler-icon { width:1.5rem; height:1.5rem; }

  header { padding-top: 0 !important; padding-bottom: 0 !important; }
  header .container-xxl { min-height: auto !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  nav.sticky-top { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
  
  /* Offcanvas / 모바일 드롭다운 메뉴 스타일 정리 */
  .offcanvas.offcanvas-end { width: 90% !important; }
  .navbar-nav .dropdown-menu,
  .offcanvas-body .dropdown-menu {
    border: none;
    border-left: 2px solid var(--forest);
    background-color: var(--cream);
    margin-left: 0.5rem;
    padding-left: 0.5rem;
  }

  /* 슬라이드 섹션 높이 줄이기 (텍스트 위 아래 여백 조정) */
  .hero-slide-bg { min-height: auto !important; padding-top: 5rem !important; padding-bottom: 7rem !important; }
  /* 슬라이드 텍스트 좌우 여백 확대 */
  .hero-slide-bg .container-xxl { padding-left: 2rem !important; padding-right: 2rem !important; }

}

@media (min-width: 1400px) {
  .container-xxl {
    max-width: 1600px !important;
  }
  .navbar-nav .nav-link {
    font-size:125% !important;
    padding-left: 1.3rem !important; /* 1600px 레이아웃에 맞춰 시원하게 확대 (36px) */
    padding-right:1.3rem !important;
  }
}

/* ==========================================================================
   인터랙션 및 움직임 효과 (Hover & Scroll)
   ========================================================================== */

/* 1. 퀵링크 카드 호버 애니메이션 */
.quicklink-card {
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
}
.quicklink-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12) !important;
}

/* 2. 동창회보 커버 이미지 호버 줌 효과 */
.bg-cream .card img {
  transition: transform 0.3s ease;
}
.bg-cream .card:hover img {
  transform: scale(1.05);
}

/* ==========================================================================
   헤더 / 메뉴 / 슬라이드 전용 은은한 애니메이션
   ========================================================================== */

/* ==========================================================
   1. 애니메이션 클래스 바인딩
   ========================================================== */
.fade-in-down { animation: fadeInDown 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) both; }
.carousel-item.active .hero-text-animate { animation: heroTextUp 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) both; }
.carousel-item.active .hero-img-animate { animation: heroImgFade 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s both; }

/* ==========================================================
   2. 모바일 기본 모션 (가로/세로 스크롤 방지용)
   ========================================================== */
@keyframes fadeInDown {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes heroTextUp {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes heroImgFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================
   3. PC 화면 (992px 이상) 위치 이동 모션
   ========================================================== */
@media (min-width: 992px) {
  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes heroTextUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes heroImgFade {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
  }
}

.magazine-thumb-wrap{position:relative;overflow:hidden;border-radius:4px;}
.magazine-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px;opacity:0;visibility:hidden;transition:all 0.25s ease-in-out;}
.magazine-thumb-wrap:hover .magazine-overlay{opacity:1;visibility:visible;}
.btn-magazine-box{width:85%;max-width:140px;padding:6px 0;background-color:rgba(255,255,255,0.15);border:1px solid #ffffff;color:#ffffff !important;font-weight:600;text-align:center;text-decoration:none;border-radius:2px;backdrop-filter:blur(2px);transition:all 0.2s ease;}
.btn-magazine-box:hover{background-color:#ffffff;color:#000000 !important;}

/* ==========================================================
   포토갤러리 & 동영상 마우스 오버(Rollover) 효과
   ========================================================== */
#photoCarousel .position-relative,
#videoCarousel a.position-relative { overflow: hidden; display: block; }
#photoCarousel img,
#videoCarousel img { transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); }
#photoCarousel .position-relative:hover img,
#videoCarousel a.position-relative:hover img { transform: scale(1.08); }
#videoCarousel .bi-play-circle-fill { transition: transform 0.3s ease, opacity 0.3s ease; }
#videoCarousel a.position-relative:hover .bi-play-circle-fill { opacity: 1 !important; transform: scale(1.15); }
#photoCarousel .bg-opacity-75,
#videoCarousel .bg-opacity-75 { transition: background-color 0.3s ease; }
#photoCarousel .position-relative:hover .bg-opacity-75,
#videoCarousel a.position-relative:hover .bg-opacity-75 { background-color: rgba(0, 0, 0, 0.9) !important; }

/*구분선(사선) 삭제*/
.breadcrumb-item + .breadcrumb-item::before { content: "\00a0" !important; }

/*그누보드 연동*/
#sns_login h3 {font-size:110%;}
#bo_v ul.bo_v_nb { list-style: none !important; padding:0; margin:0;}
#bo_v_share .btn, #bo_v_share a.btn_b03 { width: auto !important; min-width: 80px;  white-space: nowrap !important; display: inline-block;}
@media (max-width: 768px) { #bo_list .btn_bo_user .btn_admin { display: none !important; } }