/* Intro Image */
/* PC 기본 (≥768px) */
#carousel-generic {
  margin-top: clamp(0px, 20vw, 81px);
  transition: all 0.3s ease-in-out; 
}

@media (max-width: 1279.98px) {
  #carousel-generic {
    margin-top: 0px;
  }
}

/* 모바일 (<768px) */
@media (max-width: 767.98px) {
  #carousel-generic {
    margin-top: 0;
  }
}

.intro-img-wrapper {
    width: 100%;
    height: 300px; /* 모바일에서 보일 높이 */
    overflow: hidden;
}


.intro-img-wrapper img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;       
    object-position: center; 
}





/* About Us */
.about-title {
    font-size: 35px;       /* 크기 (부트스트랩 fs-3 보다 조금 크게 가능) */
    font-weight: 700;      /* 굵게 */
    color: #3A3E49;        /* 원하는 색상 (남색 예시) */
    margin-top: 105px;     /* 이미지와 간격 */
    margin-bottom: 53px;
    transition: all 0.3s ease-in-out; 
}

/* 본문 */
.about-text {
    font-size: 18px;    /* 조금 작은 글자 */
    font-weight: 500;      /* 살짝 굵게 */
    line-height: 27px;      /* 가독성 */
    color: #131212;           /* 진회색으로 안정감 */
    transition: all 0.3s ease-in-out; 
}



@media (max-width: 767.98px) {
    .about-title {
        font-size: 23px;       /* 크기 (부트스트랩 fs-3 보다 조금 크게 가능) */
        font-weight: 700;      /* 굵게 */
        color: #3A3E49;      /* 원하는 색상 (남색 예시) */
        margin-top: 55px;     /* 이미지와 간격 */
        margin-bottom: 33px;
    }

    /* 본문 */
    .about-text {
        font-size: 15px;    /* 조금 작은 글자 */
        font-weight: 500;      /* 살짝 굵게 */
        line-height: 20px;      /* 가독성 */
        color: #131212;           /* 진회색으로 안정감 */
    }
}  




/* About Church */
.church-intro-section {
    margin-top: clamp(49px, 10vw, 127px);
    transition: margin-top 0.3 ease;    
}

.church-intro-section h4 a { 
    color: #fff;
}

.church-intro-section .h-title {
    font-size: 28px;
    font-weight: 600;
    padding-bottom: 0;
}

.church-intro-section .custom-h-title {
    padding-bottom: 0;
}

@media (max-width: 767.98px) {
    .church-intro-section .h-title {
        padding-bottom: 4px;
    }
}


.church-intro-left {
    background-image: url('../img/churchprayer.webp'); /* 배경 이미지 경로 */
    background-size: cover;
    background-position: center;
    min-height: 500px;
}

/*
.church-intro-right {
    background-image: url('../img/bg_prayer.webp');
    min-height: 500px;
    padding: 68px 0 0 74px;
}
*/
.church-intro-right {
    position: relative;
    min-height: 500px;
    padding: 68px 0 0 74px;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(135deg, #197F9D, #2A5E7A);
}
.church-intro-right > * {
    position: relative;
    z-index: 1;
}
.church-intro-right::before {
    content: "";
    position: absolute;
    top: -100%;
    right: -50%;
    width: 180%;
    height: 180%;
    background: linear-gradient(135deg, #1D708F, #2A5E7A); /* 사선 그라데이션 */
    transform-origin: top right;
    transform: rotate(-90deg); /* 시작 각도 */
    opacity: 0.6;
    _animation: rotateHalf 2s ease-out forwards;
}

/* 두 번째 덮개 */
.church-intro-right::after {
    content: "";
    position: absolute;
    top: -100%;
    right: -50%;
    width: 190%;
    height: 190%;
    background: linear-gradient(135deg, #1A6989, #2A5E7A); /* 같은 그라데이션 */
    transform-origin: top right;
    transform: rotate(-120deg); /* 다른 시작 각도 */
    opacity: 0.6;
    _animation: rotateSecond 3s ease-out forwards;
}

@keyframes rotateHalf {
    0%   { transform: rotate(-90deg); }   /* 시작 각도 */
    100% { transform: rotate(-25deg); }  /* 절반만 회전 */
}

@keyframes rotateSecond {
    0%   { transform: rotate(-110deg); }
    100% { transform: rotate(-35deg); }
}

/* 뷰포트에 들어왔을 때 애니메이션 적용 */
.church-intro-right.animate-on-view::before {
    animation: rotateHalf 2s ease-out forwards;
}
.church-intro-right.animate-on-view::after {
    animation: rotateSecond 2s ease-out forwards;
}



.btn-church-intro {
    border: 1px solid #fff;
    color: #fff;
}

@media (max-width: 767.98px) {
    .btn-church-intro {
        margin: 15px 0 0 0;
        border: 1px solid #212529;
        color: #212529;
    }
    .btn-church-intro:hover {
        border-color: inherit;
        color: inherit;
        background-color: inherit;
    }

}



@media (max-width: 1279.98px) {
    .church-intro-right {
        background-image: url('../img/bg_prayer.webp');
        min-height: 500px;
        padding: 68px 0 0 74px;
    }
    /* 애니메이션 덮개 제거 */
    .church-intro-right::before,
    .church-intro-right::after {
        display: none;
    }

    /* 패딩/높이 필요하면 조정 가능 */
    .church-intro-right {
        padding: 20px 0 0 20px;
        min-height: 300px;
    }
}



/*
    AboutListBoardTable
*/
.AboutListBoardTable {
    background-color: transparent;
    border: none;
    color: #fff; /* 흰 글씨 */
}
.AboutListBoardTable .title {
    clear:both;
    color:#fff;
    font-weight:bold;
    display:block;
    width:100%;
    height:auto;
    text-align:left;
}
.AboutListBoardTable .title a {
    color: #fff;
    font-size: 19px;
    padding: 0;
    transition: color 0.3s ease; /* 부드러운 전환 추가 */
}
.AboutListBoardTable .title a:hover {
    color: #e9e6d8; /* 예: 밝은 금색으로 변경 */
}
.AboutListBoardTable .cat {
    color: #98a5bd;
    font-size:14px;
}
.AboutListBoardTable td,
.AboutListBoardTable th {
    border: none;
    background-color: transparent;
    padding-left: 0;
}

@media (max-width: 1279.98px) {
    .church-intro-left {
        min-height: 450px;
    }
    .church-intro-right {
        min-height: 450px;
        padding: 40px 0 0 44px;
    }
}

@media (max-width: 767.98px) {
   .church-intro-left {
        background-position: 56% center;    
        min-height: 260px;
    }
    .church-intro-right {
        min-height: 350px;
        padding: 30px 0 0 24px;
        margin-top: -20px;
    }
    .mb-list-view {
        padding-top: 45px;
        padding-bottom: 40px;
    }

}




/*
    배너 3개 가로 나열
*/
.church-intro-banner-section {
    margin-top: clamp(30px, 10vw, 126px);
    transition: margin-top 0.3 ease;
}



/* 여백 초기화 */
.custom-pg-wrap {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 767.98px) {
    .custom-pg-wrap {
        margin-top: 0px;
    }
}


/*

    메뉴 /program/의 처음 6개 배너 처리 부분
    첫줄 3개의 배너 좌,우 양측 여백을 없애주는 부분
    부트스트랩으로만 할 경우 좌,우 여백 처리가 잘 안되서
    css flex로 처리함

    flex: <flex-grow> <flex-shrink> <flex-basis>;

    첫 번째 값 (flex-grow)
    남는 공간이 있을 때 이 요소가 얼마나 비율로 늘어날지.

    0이면 절대 안 늘어남.
    1이면 남는 공간을 균등하게 나눠 차지.

    두 번째 값 (flex-shrink)
    공간이 부족할 때 이 요소가 얼마나 줄어들 수 있는지.
    0이면 절대 안 줄어듦.
    1 이상이면 줄어들 수 있음.

    세 번째 값 (flex-basis)
    기본 크기(기준 크기).
    auto, px, %, calc() 등으로 설정 가능.
    width 대신 flexbox에서의 기본 폭이라고 보면 됨.    

*/
:root { --pg-gap: 16px; }

.custom-pg-wrap {
    gap: var(--pg-gap);
    display: flex;
    flex-wrap: wrap;
}

.custom-pg-wrap > div {
    flex: 0 0 calc(100%); /* 모바일 1칸 */
}

@media (min-width: 768px) {
    .custom-pg-wrap > div { 
        flex: 0 0 calc((100% - 2*var(--pg-gap)) / 3); 
    }
}

.church-intro-banner img {
    transition: transform 0.3s ease;
}

@media (min-width: 768px) {
    .church-intro-banner img:hover {
        _transform: scale(1.03);
    }
}

/* 각 배너 속성 (글자 크기,색깔 등) */
.church-intro-banner p {
    font-size: 19px;
    color: #333;
    margin: 0 0 4px 0;    
}







/* timeline 연혁 */
.timeline {
  position: relative;
  margin: 2rem 0;
  padding: 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background: #0d6efd;
}

/* 공통 내용 스타일 */
.timeline-item {
  position: relative;
  margin-bottom: 3rem;
  width: 100%;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
}

.timeline-date {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 0.25rem 0.75rem;
  color: #0d6efd;
  font-weight: bold;
  border-radius: 20px;
  border: 2px solid #0d6efd;
  white-space: nowrap;
  z-index: 1;
}

.timeline-content {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
  width: 100%;
}

/* 데스크탑: 좌우 교차 배치 */
@media (min-width: 768px) {
  .timeline-item {
    flex-direction: row;
    justify-content: center;
  }
  .timeline-item:nth-child(odd) .timeline-content {
    order: 1;
    margin-right: 55%;
  }
  .timeline-item:nth-child(even) .timeline-content {
    order: 2;
    margin-left: 55%;
  }
}
.timeline-content img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 0.5rem;
}



/*
    Worship
*/
/* 기본 글자 크기 */
table.responsive-table {
  font-size: 1rem;
}

/* 모바일에서 작게 */
@media (max-width: 768px) {
  table.responsive-table {
    font-size: 0.8rem;
  }
}


/*
    Locatioins
*/
.map-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 2rem;
}
.map-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 768px) {
  table {
    font-size: 0.9rem;
  }
}





/*
    Bottom 여백
*/

.m-bottom {
    display: block;
     margin-bottom: 234px;
 }

@media (max-width: 767.98px) {
    .m-bottom {
        display: block;
        margin-bottom: 100px;
    }
}