@charset "utf-8";

/* =========================================================================
   1. Base Reset & Global Container (S방식)
   ========================================================================= */
body {
  margin: 0; padding: 0;
  background-color: #111111; /* 기본 검정 배경 */
  font-family: Pretendard, sans-serif;
  color: #FAFAF8;
}
* { box-sizing: border-box; }
a:hover { text-decoration: none; }
button { background: none; border: none; padding: 0; cursor: pointer; }

/* ★ 전역 공통 컨테이너 사이즈 (부트스트랩 호환) ★ */
.container { width: 100%; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }


@media (min-width: 1440px) { .container { width: 1800px; } }


#mm-0 #joinForm:not(.container #joinForm) {
    background: #111111 !important;
    padding: 8rem 1rem !important;
    margin: 0 auto;
    max-width: 1170px;
}
.container #joinForm{padding: 4rem 1rem !important;}
.container #loginForm{margin: 8rem auto 100px !important;}
.table-striped>tbody>tr:nth-of-type(odd):not(.container .table-striped>tbody>tr:nth-of-type(odd)){background: #111111 !important;}
/* =========================================================================
   2. 필수 유틸리티 클래스 (전역 사용)
   ========================================================================= */
.w-full { width: 100%; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden !important; }
.rounded-2xl { border-radius: 1rem !important; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }


/* =========================================================================
   3. Header (GNB) Styles
   ========================================================================= */
.nav-wrap {
  background-color: #111111;
  border-bottom: 1px solid #222222;
  position: sticky; top: 0; z-index: 999; width: 100%;
}
.nav-inner { 
  max-width: 1600px; margin: 0 auto; padding: 0 15px; height: 88px; display: flex; align-items: center; 
}
.nav-logo img { height: 40px; }
.nav-item-link { transition: opacity 0.2s; color:#fff; text-decoration:none; }
.nav-item-link:hover { opacity: 0.6; color:#c5a059 !important; }
.nav-right { gap: 12px; }
.nav-auth-links { gap: 12px; }
.nav-church-btn { font-size: 16px; color: #c5a059; border: 1px solid #c5a059; border-radius: 60px; padding: 5px 15px; transition: opacity 0.2s; background:transparent; }
.nav-auth-links a:hover{color:#c5a059;}
.nav-auth-links a:focus{text-decoration:none;color:#c5a059;}
.nav-church-btn:hover { opacity: 0.6; }
.nav-auth-link { font-size: 16px; color: #AAAAAA; text-decoration:none; }
.nav-auth-divider { color: #444444; font-size: 12px; }
.subal { transition: 0.3s ease; }
#gnb > li > a { text-decoration: none; }


/* =========================================================================
   4. Footer Styles
   ========================================================================= */
.footer-wrap { background-color: #0D0D0D; border-top: 1px solid #1E1E1E; padding: 40px 0; }
.footer-grid { max-width: 1600px; margin: 0 auto; padding: 0 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: flex-end; }
.footer-address { font-size: 16px; color: #666666; line-height: 1.9; margin: 0; }
.footer-right { text-align: right; }
.footer-copy-title { font-size: 32px; color: #FAFAF8; opacity: 0.5; font-weight: 700; margin: 0; line-height: 1.1; }
.footer-copy-subtitle { font-size: 24px; color: #FAFAF8; opacity: 0.5; font-weight: 700; margin: 0; }
.footer-designed-by, .footer-copyright { font-size: 16px; color: #FAFAF8; opacity: 0.5; margin-top: 5px; }


/* =========================================================================
   5. Sub GNB Styles (서브페이지용)
   ========================================================================= */
#subtop { position: relative; } 
#subtop .subtopIG { width: 100%; padding: 11vw; background-size: cover; background-position: center; }
#subtop .sub-desc { position: absolute; top: 50%; right: 50%; text-align: center; transform: translate(50%, -50%); border: none; }
#subtop .sub-desc h1 { margin: 0 0 15px; font-size: 18px; color: #fff; }
#subtop .sub-desc h2 { font-size: 40px; font-weight: 600; border-bottom: 4px solid white; color: #fff; padding: 0 0 10px; }

#subgnb { text-align: left; background: transparent; position: absolute; bottom: -35px; left: 0; width: 100%; z-index: 300; }
#subgnb > .container { background: #fff; padding: 0 15px; box-shadow: 8px 9px 9px rgba(0,0,0,.08); border-radius: 5px; position: relative; z-index: 300; }
#subgnb span, #subgnb a { font-size: 15px; color: #777; position: relative; text-decoration: none; transform: skew(-0.05deg); }
#subgnb > div > div > div > img { float: left; padding: 16px 20px 15px 10px; position: relative; top: 0px; max-width: 51px; }
#subgnb a.active { color: #3A5067; font-weight: bold; }
#subgnb .dropdown { display: inline-block; float: left; }
#subgnb .dropdown .btn { padding: 15px 15px; font-size: 15px; font-weight: bold; }
#subgnb .dropdown .btn-default { border-right: 1px solid #ddd; border-left: none; border-top: none; border-bottom: none; color: #404040; background-color: transparent; }
#subgnb .dropdown .btn:hover { background-color: #fff; transition: 0.3s all ease; color: #404040; }
#subgnb .dropdown .btn .active { background-color: #005D9A; }
#subgnb .dropdown-menu > li > a { padding: 10px 20px; transition: 0.3s all ease; font-size: 15px; }
#subgnb .caret { border-top: 2px solid #3A5067; border-right: 0px solid transparent; border-left: 2px solid #3A5067; position: relative; margin: 0; height: 8px; width: 8px; transform: rotate(225deg); transition: all 0.6s; margin-top: -6px; margin-left: 15px; font-size: 20px; }
#subgnb .dropdown:first-child { border-left: 1px solid #ddd; }


/* =========================================================================
   6. PC 전체화면 사이트맵 메뉴 (gnb-all)
   ========================================================================= */
.gnb-all {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(73, 58, 48, 0.75); 
    backdrop-filter: blur(5px); 
    /* ★ 이 부분 수정: GNB보다 무조건 위로 올라오도록 수치 극대화 및 강제 적용 */
    z-index: 9999999 !important; 
    overflow-y: auto; padding: 40px 20px;
}
.gnb-all-inner { max-width: 1400px; margin: 0 auto; position: relative; }

.gnb-all-header { display: flex; justify-content: center; position: relative; margin-bottom: 60px; padding-top: 10px; }
.gnb-all-header .all-logo { height: 45px; }

.gnb-all-header .all-auth { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 15px; color: #fff; font-size: 15px; }
.gnb-all-header .all-auth a { color: #fff; text-decoration: none; opacity: 0.8; transition: 0.2s; }
.gnb-all-header .all-auth a:hover { opacity: 1; color: #c5a059; }
.gnb-all-header .all-auth span { opacity: 0.3; }

/* 닫기 버튼 스타일 */
.all-close-btn { font-size: 45px; color: #fff; line-height: 1; margin-left: 20px; transition: 0.2s; background: none; border: none; outline: none; cursor: pointer; }
.all-close-btn:hover { color: #c5a059; transform: rotate(90deg); }

.gnb-all-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 50px; }
.gnb-all-col { min-width: 140px; text-align: center; }
.gnb-all-col h3 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 25px; }
.gnb-all-col h3 a { color: #fff; text-decoration:none; transition:0.2s; }
.gnb-all-col h3 a:hover { color:#c5a059; }
.gnb-all-col ul { list-style: none; padding: 0; margin: 0; }
.gnb-all-col ul li { margin-bottom: 15px; }
.gnb-all-col ul li a { color: #ccc; font-size: 16px; text-decoration: none; transition: 0.2s; }
.gnb-all-col ul li a:hover { color: #c5a059; font-weight: bold; }


/* =========================================================================
   ★ 모달 활성화 시 GNB 강제 숨김 클래스 ★
   ========================================================================= */
.nav-hide-force {
    z-index: -1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =========================================================================
   7. 모바일 Mmenu 다크 테마 오버라이드 및 패딩 조정
   ========================================================================= */
#my-menu:not(.mm-menu) { display: none; }
.mm-menu { z-index: 9999999 !important; background: rgba(25, 30, 40, 0.98) !important; color: #fff !important; }
.mm-wrapper__blocker { z-index: 9999998 !important; }

/* ★ 상단 헤더 영역 선 정리 ★ */
.mm-navbars-top { border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.mm-navbar { border-bottom: none !important; } 
.mm-navbar .mm-title { color: #fff !important; font-weight: 500; font-size: 16px; }

/* ★ 1. X 버튼 겹침 완전 해결 (이중으로 그리던 CSS 제거, 기본값만 하얗게) ★ */
.mm-navbar .mm-btn_close { text-indent: 0; }
.mm-navbar .mm-btn:before, 
.mm-navbar .mm-btn:after { 
    border-color: #fff !important; /* 플러그인 기본 X 선 색상만 흰색으로 */
    background-color: transparent !important; /* 이중으로 겹치던 선 제거 */
    width: 5px !important; 
    height: 5px !important;
}
/* (혹시 스크립트에 남아있을지 모르는 옛날 a태그 강제 숨김) */
.closeMenu { display: none !important; }

/* 리스트 선 및 텍스트 색상 */
.mm-listview > li:after { border-color: rgba(255,255,255,0.1) !important; }
.mm-listview > li > a, .mm-listview > li > span { color: #fff !important; }

/* ★ 2. 로그인/회원가입 박스 디자인 ★ */
.mob-auth-box { 
    display: flex; 
    width: 100%;
    gap: 20px; 
    padding: 0 25px 15px 25px; 
    justify-content: flex-start;
}
.mob-auth-box a { 
    color: #d7b87c !important; 
    font-size: 15px; 
    text-decoration: none; 
}

/* ★ 3. 전체 메뉴 항목 상하좌우 패딩 넉넉하게 확대 ★ */
.mm-listview > li > a, 
.mm-listview > li > span { 
    padding: 18px 25px !important; 
    font-size: 16px !important;
}

/* ★ 4. 하단 테두리 선 전체 너비로 깔끔하게 처리 ★ */
.mm-listview > li:after { 
    left: 0 !important; 
    right: 0 !important; 
    border-bottom: 1px solid rgba(255,255,255,0.1) !important; 
}

/* ★ 5. 화살표 옆의 지저분한 "세로 선( | )" 완벽 제거 ★ */
.mm-listview .mm-next:before { 
    display: none !important; 
    border-left: none !important; 
}

/* ★ 6. 우측 화살표 디자인 보정 ★ */
.mm-listview .mm-next:after { 
    border-color: #aaa !important; 
    width: 10px !important; 
    height: 10px !important; 
    right: 25px !important; 
}


/* =========================================================================
   ★ 모바일 Mmenu 완벽 제어용 CSS ★
   ========================================================================= */
/* 1. 플러그인 로드 전에만 원본 텍스트 숨김 처리 (Mmenu 전용 가이드) */
#my-menu:not(.mm-menu) { 
    display: none; 
}

/* 2. 모바일 메뉴와 오버레이가 최상단으로 오도록 강제 */
.mm-menu { 
    z-index: 9999999 !important; 
}
.mm-wrapper__blocker { 
    z-index: 9999998 !important; 
}
/* =========================================================================
   ★ 서브페이지 전용 컨테이너 사이즈 축소 ★
   ========================================================================= */
/* 서브페이지 메뉴바(#subgnb)와 서브페이지 본문영역(#content) 안의 container만 제한 */
#subgnb .container,
#content[class*="sub"] .container {
    max-width: 1400px !important; 
    width: 100% !important;
}


/* =========================================================================
   8. Media Queries (Header/Footer)
   ========================================================================= */
@media (max-width: 1024px) {
  .nav-items, .nav-auth-links { display: none !important; }
  .nav-right { margin-left: auto !important; }
  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .footer-right { text-align: left; }
}