@font-face {
    font-family: 'Pretendard Variable';
    src: url('webfont/PretendardVariable.woff2') format('woff2-variations'); /* 가변 폰트 형식 지정 */
    font-weight: 100 900; /* 100부터 900까지 모든 두께를 사용하겠다는 선언 */
    font-style: normal;
}

/* 실제 적용 예시 */
body {
    font-family: 'Pretendard Variable', sans-serif;
}

/* 🚨 V1 원본 폰트 사이즈 완벽 복구 */
:root {
  --font-size: 16px;
  --nav-label: 1.125rem;
  --menu-title: 1.15rem;
  --menu-sub-heading: 0.88rem;
  --menu-item: 0.85rem;
  
  --section-title: 3rem;
  --section-sub: 1.5rem;
  --card-title: 1.25rem;
  --h3: 1.11rem;
  --p1: 1.33rem;
  --p2: 1rem;
  --p3: 0.95rem;
  --p4: 0.83rem;
  --caption: 0.8125rem;
  
  --accent-green: #5a7a5a;
  --bg-primary: #ffffff;
  --text-primary: oklch(0.145 0 0);
  --font-section-title: 'Paperlogy', 'Pretendard', sans-serif;
}
.swiper-button-next:after, .swiper-button-prev:after{display:none!important;}
/* =========================================
   ✨ 세련된 호버(Hover) 애니메이션
   ========================================= */

/* 1. 아이콘 버튼 공통 (둥둥 뜨는 느낌 + 그림자) */
#main1 .main1M .main1BT .circle,
#main3 .main3M .main3BT .circle {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* 부드러운 텐션 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* 기본 옅은 그림자 */
}
#main1 .main1M .main1BT:hover .circle,
#main3 .main3M .main3BT:hover .circle {
    transform: translateY(-8px); /* 위로 살짝 올라감 */
    box-shadow: 0 15px 25px rgba(0,0,0,0.08); /* 그림자가 깊어짐 */
}

/* 아이콘 이미지 On/Off 자연스러운 크로스페이드 */
#main1 .main1M .main1BT .circle .on,
#main3 .main3M .main3BT .circle .on {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
#main1 .main1M .main1BT .circle .off,
#main3 .main3M .main3BT .circle .off {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
#main1 .main1M .main1BT:hover .circle .on,
#main3 .main3M .main3BT:hover .circle .on { opacity: 1; }
#main1 .main1M .main1BT:hover .circle .off,
#main3 .main3M .main3BT:hover .circle .off { opacity: 0; }

/* 아이콘 텍스트 색상 변경 */
#main1 .main1M .main1BT h1,
#main3 .main3M .main3BT h1 {
    transition: color 0.3s ease;
}
#main1 .main1M .main1BT:hover h1,
#main3 .main3M .main3BT:hover h1 {
    color: var(--accent-green); /* 브랜드 포인트 컬러로 부드럽게 변경 */
}

/* 2. 설교 영상 썸네일 호버 (스케일 업 + 플레이버튼 팝업) */
/* 이미지가 튀어나가지 않도록 부모 요소에 overflow hidden 적용 */
#main2 .main2LM, #main2 .main2RM {
    display: block;
    overflow: hidden; 
}
#main2 .main2M .main2L .main2LM .main2BG,
#main2 .main2M .main2R .main2RM .main2BG {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#main2 .main2LM:hover .main2BG,
#main2 .main2RM:hover .main2BG {
    transform: scale(1.05); /* 배경 썸네일 스케일 업 */
}

/* 플레이 버튼 호버 애니메이션 */
#main2 .main2PLAY {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 바운스 효과 */
    position: absolute;transform: translate(-50%, -50%);top: 50%;left: 50%;padding: 2rem;background-repeat: no-repeat;background-position: center;background-size: contain;
}

#main1{padding:30px 0 60px;}
#main1 .main1M{display:grid; grid-template-columns: repeat(5, 1fr);justify-items: center;text-align: center;}
#main1 .main1M .main1BT{text-decoration:none;}
#main1 .main1M .main1BT .circle{padding:4rem;position:relative;display:inline-block;background-color: #F5F9FD;border-radius: 50%;margin: 0 0 30px;}
#main1 .main1M .main1BT .circle .on,
#main1 .main1M .main1BT .circle .off{position:absolute;top:0;right:0;width:100%;height:100%;background-repeat: no-repeat;background-position: center;background-size: 75%;}
#main1 .main1M .main1BT h1{margin: 0;font-size: 1.3rem;color:#000;font-weight:bold;}

#main2{}
#main2 .main2T{}
#main2 .main2T h1{margin:0 0 20px;font-size:2.4rem;font-weight:bold;}
#main2 .main2M{display:grid; grid-template-columns: repeat(2, 1fr);gap:1rem;}
#main2 .main2M .main2L{}
#main2 .main2M .main2L .main2LM{text-decoration:none;}
#main2 .main2M .main2L .main2LM .main2BG{position: relative;aspect-ratio: 16 / 9;background-repeat: no-repeat;background-position: center;background-size: cover;}
#main2 .main2M .main2L .main2LM h1{margin: 30px 0 0; text-align: center; font-size: 1.5rem; color: #000;}
#main2 .main2M .main2R{display:grid; grid-template-columns: repeat(1, 1fr);align-items: center;gap:1rem;}
#main2 .main2M .main2R .main2RM{text-decoration:none;}
#main2 .main2M .main2R .main2RM .main2BG{position: relative;aspect-ratio: 16 / 9;background-repeat: no-repeat;background-position: center;background-size: cover;}
#main2 .main2M .main2R .main2RM h1{margin: 20px 0 0; text-align: center; font-size: 1.2rem; color: #000;font-weight:bold;}
#main2 .main2M .main2R .main2RM h5{text-align: center; font-size: 1.2rem; color: #000;}

#main3{padding: 60px 0;}
#main3 .main3M{display:grid; grid-template-columns: repeat(8, 1fr);justify-items: center;text-align: center;gap:2rem;}
#main3 .main3M .main3BT{text-decoration:none;}
#main3 .main3M .main3BT .circle{padding:4rem;position:relative;display:inline-block;background-color: #F5F9FD;border-radius: 50%;margin: 0 0 10px;}
#main3 .main3M .main3BT .circle .on,
#main3 .main3M .main3BT .circle .off{position:absolute;top:0;right:0;width:100%;height:100%;background-repeat: no-repeat;background-position: center;background-size: 75%;}
#main3 .main3M .main3BT h1{margin: 0;font-size: 1.3rem;color:#000;font-weight:bold;}


#main4{padding:60px 0 50px;}
#main4 .main4TM{display: flex; justify-content: space-between;margin:0 0 70px;}
#main4 .main4TM .main4T{}
#main4 .main4TM .main4T h5{font-size:1.8rem;margin:0 0 20px;font-weight: 500;color:#3f71bc;}
#main4 .main4TM .main4T h5 b{font-weight: 900;}
#main4 .main4TM .main4T h1{font-size:2.9rem;margin:0;}
#main4 .main4TM .main4HF{display: flex;align-items: center;gap: 1rem;text-decoration:none;color:#000;}
#main4 .main4TM .main4HF h1{font-size:1.4rem;margin:0;}
#main4 .main4TM .main4HF img{width: 3rem;}


.cms-gallery-section { padding: 5rem 0; background: #fff; }
.cms-circle-nav-btn { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid #000; transition: 0.3s; display: flex; justify-content: center; align-items: center; }
.cms-circle-nav-btn:hover { background: #000; color: #fff; }
.cms-divider-gallery { height: 1px; background: #000; margin: 1.25rem 0 2rem; }
.cms-gallery-item-wrap { display: block; text-decoration: none; position: relative; }
.cms-gallery-thumb-wrap { position: relative; overflow: hidden; background-color: #f3f4f6; aspect-ratio: 4/3; }

/* 🚨 Swiper 갤러리 내부 이미지 스케일 업 애니메이션 */
.cms-gallery-thumb.galleryBG { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.5s ease; }
.cms-gallery-item-wrap:hover .cms-gallery-thumb.galleryBG { transform: scale(1.05); }

/* 🚨 정보 오버레이 페이드 인 애니메이션 */
.cms-gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 25%; padding: 0.6rem 1rem; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s ease; display: flex; flex-direction: column; justify-content: center; }
.cms-gallery-item-wrap .cms-gallery-overlay { opacity: 1; }
.cms-gallery-overlay-title { color: #fff; font-size: var(--p3); font-weight: 600; margin: 0; }
.cms-gallery-overlay-date { color: rgba(255,255,255,0.7); font-size: var(--p4); margin-top: 0.2rem; margin: 0; }

.cms-gallery-view-all { text-align: center; margin-top: 2rem; }
.cms-view-all-link-center { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; font-size: var(--p2); transition: 0.2s; }
.cms-view-all-link-center:hover { color: var(--accent-green); }


@media (max-width: 1499px) {
    /* 해상도가 살짝 좁아질 때 여백 및 타이틀 간격 미세 조정 */
    #main4 .main4TM { margin: 0 0 50px; }
}

@media (max-width: 1199px) {
    /* 태블릿 가로 / 소형 데스크탑 (아이콘 크기 축소 및 영상 레이아웃 변경) */
    #main1 .main1M .main1BT .circle,
    #main3 .main3M .main3BT .circle { padding: 2.5rem; }
    
    /* 설교 영역: 메인 영상을 위로, 서브 영상을 아래로 1단 분리 후 서브 영상은 3열 배치 */
    #main2 .main2M { grid-template-columns: 1fr 1fr; gap: 2rem; }
    #main2 .main2M .main2R { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width: 992px) {
    /* 태블릿 세로 (아이콘 배열 변경 및 폰트 축소) */
    #main1 .main1M { grid-template-columns: repeat(5, 1fr); gap: 20px; }
    #main3 .main3M { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    
    #main2 .main2M .main2R { grid-template-columns: repeat(1, 1fr); }
    
    #main4 .main4TM .main4T h1 { font-size: 2.3rem; }
}

@media (max-width: 767px) {
    .row{margin:0;}
    .swiper-button-prev, .swiper-button-next{background-size: 20px!important;}
    #main-slider{padding:60px 0 0;}
    /* 모바일 환경 (완전한 세로형 배치 및 터치 친화적 여백/폰트 제공) */
    
    /* Main 1: 상단 아이콘 메뉴 (3열 배치) */
    #main1 { padding: 30px 0 40px; }
    #main1 .main1M { grid-template-columns: repeat(5, 1fr); gap: 15px 10px; }
    #main1 .main1M .main1BT .circle { padding: 1.7rem; margin: 0 0 10px; }
    #main1 .main1M .main1BT .circle .on, #main1 .main1M .main1BT .circle .off{background-size: contain;}
    #main1 .main1M .main1BT h1 { font-size: .8rem; }

    /* Main 2: 영상 영역 (전체 1열 스택) */
    #main2 .main2T h1 { font-size: 1.8rem; margin: 0 0 15px; }
    #main2 .main2M {grid-template-columns: 1fr;}
    #main2 .main2M .main2L .main2LM h1 { font-size: 1.25rem; margin: 15px 0 0; }
    #main2 .main2M .main2R { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
    #main2 .main2M .main2R .main2RM h1 { font-size: 1.1rem; margin: 10px 0 0; }
    #main2 .main2M .main2R .main2RM h5 { font-size: 1rem; }

    /* Main 3: 하단 아이콘 메뉴 (3열 배치) */
    #main3 { padding: 40px 0; }
    #main3 .main3M { grid-template-columns: repeat(4, 1fr); gap: 20px 10px; }
    #main3 .main3M .main3BT .circle { margin: 0 0 10px; }
    #main3 .main3M .main3BT .circle .on, #main3 .main3M .main3BT .circle .off{background-size: 75%;}
    #main3 .main3M .main3BT h1 { font-size: 0.95rem; }

    /* Main 4: 갤러리/앨범 영역 (타이틀과 더보기 버튼 세로 배치) */
    #main4 { padding: 40px 0 30px; }
    #main4 .main4TM { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 0 0 30px; }
    #main4 .main4TM .main4T h5 { font-size: 1.2rem; margin: 0 0 5px; }
    #main4 .main4TM .main4T h1 { font-size: 2rem; }
    #main4 .main4TM .main4HF{justify-content: flex-end;}
    #main4 .main4TM .main4HF img{width: 3rem;}
    #main4 .main4TM .main4HF h1 { font-size: 1.1rem; }
    
    .cms-gallery-section { padding: 3rem 0; }
}