﻿/* ========================================================
   1. 폰트 및 키프레임 (Fonts & Keyframes)
======================================================== */
@font-face { font-family: 'notoserifkr-medium'; src: url('fonts/notoserifkr-medium.otf') format('opentype'); }

@keyframes move { from { transform: translateX(100px) scale(1.2); animation-timing-function: cubic-bezier(.2,0,.8,1); } to { transform: translateX(0px) scale(1); } }
@keyframes rotation { 100% { transform: rotate(360deg); } }
@-webkit-keyframes updown { 0% { bottom: 0; } 100% { bottom: 30px; } }
@keyframes updown { 0% { bottom: 0; } 100% { bottom: 30px; } }
@-webkit-keyframes updown2 { 0% { bottom: 0; } 100% { bottom: 15px; } }
@keyframes updown2 { 0% { bottom: 0; } 100% { bottom: 15px; } }
@-webkit-keyframes arrayR { 0%, 100% { -webkit-transform: translateX(0); } 50% { -webkit-transform: translateX(25px); } }
@keyframes arrayR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(25px); } }
@-webkit-keyframes arrayL { 0%, 100% { -webkit-transform: translateX(0); } 50% { -webkit-transform: translateX(25px); } }
@keyframes arrayL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(25px); } }

/* ========================================================
   2. 전역 설정 및 유틸리티 (Globals & Utilities)
======================================================== */
:root { --gap: 30px; --width1: 30%; --width2: 6; }
.notoserifkr { font-family: 'notoserifkr-medium'; }
.no-padding { padding-right: 0; padding-left: 0; }
.no-margin { margin-right: 0; margin-left: 0; }
.black { color: #000; }
.white { color: #fff; }
a { color: inherit; text-decoration: none; }
.box { display: inline-block; position: relative; opacity: 0; top: 50px; }
.plus { position: absolute; top: 0; right: 0; }
.plus:hover { opacity: 0.8; transition: 0.3s all ease; }

/* common */
#main-slider { position: relative; }
.nav-tabs { border-bottom: none; }
.slider .slider-wrapper .slide p { width: 100%; }
.slider .slider-wrapper .slide .each-img img { width: 100%; }
.slider .slider-dots { display: inline-flex; justify-content: center; gap: 10px; }
.slider .slider-dots .each-dot { width: 20px !important; height: 20px !important; background-color: #fff !important; transition: 0.3s all ease; }
.slider .slider-dots .each-dot.active { width: 15px !important; height: 15px !important; background-color: rgba(0,0,0,0.5) !important; transition: 0.3s all ease; margin-bottom: 30px; border: none !important; border-radius: 15px !important; }

/* common - view more effects */
.view-more { display: inline-block; text-decoration: none; overflow: hidden; vertical-align: middle; background: transparent; -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; z-index: 1; font-weight: 100; }
.view-more2 { display: inline-block; text-decoration: none; overflow: hidden; vertical-align: middle; background: transparent; -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; z-index: 1; font-weight: 100; }
.view-more:hover:before { -webkit-transform: translateX(0) skewX(-17.62deg); -ms-transform: translateX(0) skewX(-17.62deg); transform: translateX(0) skewX(-17.62deg); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; }
.view-more:before { z-index: -1; content: ""; display: block; width: 135%; height: 105%; position: absolute; left: 0; top: 0; -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; -webkit-transform: translateX(-101%) skewX(-17.62deg); -ms-transform: translateX(-101%) skewX(-17.62deg); transform: translateX(-101%) skewX(-17.62deg); -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
a:hover .view-more2:before { -webkit-transform: translateX(0) skewX(-17.62deg); -ms-transform: translateX(0) skewX(-17.62deg); transform: translateX(0) skewX(-17.62deg); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; }
a .view-more2:before { z-index: -1; content: ""; display: block; width: 135%; height: 105%; position: absolute; left: 0; top: 0; -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; -webkit-transform: translateX(-101%) skewX(-17.62deg); -ms-transform: translateX(-101%) skewX(-17.62deg); transform: translateX(-101%) skewX(-17.62deg); -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.direct-popup .visible-popups > .each > .bottom span { font-size: 17px !important; }

/* ========================================================
   3. 메인 레이아웃 및 객체별 스타일
======================================================== */
/* [ Main 2: 아이콘 메뉴 ] */
#main2 {padding: 6.3vw 0 0;text-align: center;}
#main2 .main2T h3 { margin: 0 0 3.5vw; font-size: .9rem; letter-spacing: 0.2rem; font-weight: bold; color:#3b82f6; }
#main2 .main2T h1 { margin: 0 0 5vw; font-size: 2.7rem; }

/* [ Main 3: 예배 영상 ] */
#main3 .main3TM { padding: 4.1vw 4.7vw; height: 31vw; position: relative; margin: 0 0 30px; }
#main3 .main3TM .sermonM { height: 100%; position: relative; color: #fff; }
#main3 .main3TM .sermonM a{color:#fff;}
#main3 .main3TM .sermonM > h5 { margin: 0 0 10vw; font-size: .9rem; }
#main3 .main3TM .sermonM .sermonT h3 { margin: 0; font-size: 1.3rem; }
#main3 .main3TM .sermonM .sermonT > h5 { margin: 0; font-size: 1.1rem; }
#main3 .main3TM .sermonM .sermonT .sermonHF { margin: 1.5vw 0; display: flex; align-items: center; gap: 30px; }
#main3 .main3TM .sermonM .sermonT .sermonHF h1 { margin: 0; font-size: 3.3rem; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 70%; }
#main3 .main3TM .sermonM .sermonT .sermonHF .circle { padding: 40px; display: inline-block; position: relative; }
#main3 .main3TM .sermonM .sermonT .sermonHF .circle .on, #main3 .main3TM .sermonM .sermonT .sermonHF .circle .off { width: 100%; height: 100%; top: 0; right: 0; position: absolute; background-repeat: no-repeat; background-size: auto; background-position: center; }
#main3 .main3TM .sermonM .sermonT .sermonHF .circle .on { opacity: 0; transition: 0.3s all ease; }
#main3 .main3TM .sermonM .sermonT .sermonHF .circle .off { opacity: 1; transition: 0.3s all ease; }
#main3 .main3TM .sermonM .sermonT:hover .sermonHF .circle .on { opacity: 1; transition: 0.3s all ease; }
#main3 .main3TM .sermonM .sermonT:hover .sermonHF .circle .off { opacity: 0; transition: 0.3s all ease; }
#main3 .main3TM .sermonM .youthBT { display: inline-block; position: absolute; bottom: 0; right: 0; }
#main3 .main3BM { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
#main3 .main3BM .worshipM { overflow: hidden; border-radius: 15px; transition: box-shadow 0.3s ease; }
#main3 .main3BM .worshipM:hover { box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
#main3 .main3BM .worshipM .worshipBG img { transition: transform 0.6s ease; width: 100%; height: 100%; object-fit: cover; }
#main3 .main3BM .worshipM:hover .worshipBG img { transform: scale(1.08); }
#main3 .main3BM .worshipM .worshipT { height: 10vw; position: relative; background-color: #f9f9f9; }
#main3 .main3BM .worshipM .worshipT .worshipMT { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 100%; padding: 0 1rem; text-align: center; }
#main3 .main3BM .worshipM .worshipT .worshipMT h3 { margin: 0 0 1vw; font-size: 1.2rem; }
#main3 .main3BM .worshipM .worshipT .worshipMT h1 { margin: 0 0 .5vw; font-size: 1.2rem; }
#main3 .main3BM .worshipM .worshipT .worshipMT h5 { margin: 0; font-size: 1.2rem; }

/* [ Main 4: 다음세대 & 슬라이드 카드 ] */
#main4 { width: 100vw; max-width: 100%; overflow: hidden; margin: 6rem 0; background-color: #fff; background-image: url('../images/4_ng_bg.jpg');}
.main4-bleed-wrap { display: flex; align-items: center; width: 100%; padding-left: 5vw; padding-right: 0; box-sizing: border-box; }
.main4-left { width: 40vw; max-width: 740px; flex-shrink: 0; margin-right: 4vw; }
.featured-card { width: 100%; aspect-ratio: 1 / 1.05; border-radius: 2.5vw; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 2.5vw; }
.featured-card .card-text h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }
.featured-card .card-text .verse { font-size: 0.95rem; margin-bottom: 1.5rem; line-height: 1.6; }
.featured-card .card-text .info { font-size: 0.85rem; margin-bottom: 1.5rem; font-weight: 300; }
.featured-card .card-text .btn-link { display: inline-block; border: 1px solid #fff; color: #fff; padding: 0.5rem 1.5rem; border-radius: 2rem; font-size: 0.875rem; transition: 0.3s; }
.featured-card .card-text .btn-link:hover { background: #fff; color: #000; }
.main4-right { flex: 1; min-width: 0; }
.main4-right .title-area { margin-bottom: 2vw; }
.main4-right .title-area h6 { color: #3b82f6; font-size: 0.875rem; font-weight: bold; letter-spacing: 0.15rem; margin: 0 0 10vw; }
.main4-right .title-area h2 { font-size: 2.2rem; font-weight: 800; color: #333; }
.main4-right .title-area h2 span { color: #007bff; }
.nextgen-swiper { width: 100%; padding-bottom: 1rem; }
.slide-card { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.slide-card .img-box { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.6s ease; }
.slide-card:hover .img-box { transform: scale(1.05); }
.slide-card .img-box::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); }
.slide-card .slide-title { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; color: #fff; font-size: 0.95rem; font-weight: 500; z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slider-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 1vw; padding-right: 10vw; }
.custom-progress { position: relative !important; width: 70% !important; height: 3px !important; background: #e0e0e0; margin: 0 !important; }
.custom-progress .swiper-pagination-progressbar-fill { background: #ffca28; }
.nav-buttons { display: flex; gap: 1rem; align-items: center; }
.nav-buttons button { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #555; transition: 0.3s; }

/* [ Main 5: 앨범 (갤러리/탭) ] */
#main5 {background-image: url('../images/5_album_bg.jpg');overflow:hidden;}
#main5 .main5T h3 { margin: 0 0 4.7vw; font-size: .9rem; letter-spacing: 0.2rem; }
#main5 .main5T h1 { margin: 0 0 3.3vw; font-size: 2.7rem; }
#main5 .main5M { margin: 0 0 7vw; }
#main5 .main5M .tab-slider-section .tab-menu { display: flex; gap: 20px; list-style: none; cursor: pointer; padding: 0 0 30px; }
#main5 .main5M .tab-slider-section .tab-menu li { margin: 0; color: #1c1c1c; font-size: 1.3rem; }
#main5 .main5M .tab-slider-section .tab-menu li.active { color: #0075ff; }
#main5 .main5M .tab-slider-section .tab-content-wrap { position: relative; }
#main5 .main5M .tab-slider-section .tab-content-wrap .swiper-container .swiper-wrapper .contentSlide { position: relative; }
#main5 .main5M .tab-slider-section .tab-content-wrap .swiper-container .swiper-wrapper .contentSlide a .galleryIMG { background-repeat: no-repeat; background-position: center; background-size: cover; height: 15vw; transition: transform 0.5s ease; overflow: hidden; }
#main5 .main5M .tab-slider-section .tab-content-wrap .swiper-container .swiper-wrapper .contentSlide a:hover .galleryIMG { transform: scale(1.04); }
#main5 .main5M .tab-slider-section .tab-content-wrap .swiper-container .swiper-wrapper .contentSlide a .galleryIMG .galleryT { background-color: rgba(0, 0, 0, .5); padding: 1.5vw; height: 100%; width: 100%; position: absolute; top: 0; opacity: 0; transition: 0.3s all ease; }
#main5 .main5M .tab-slider-section .tab-content-wrap .swiper-container .swiper-wrapper .contentSlide:hover a .galleryIMG .galleryT { opacity: 1; }
#main5 .main5M .tab-slider-section .tab-content-wrap .swiper-container .swiper-wrapper .contentSlide a .galleryIMG .galleryT h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; color: #fff; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; }
#main5 .main5M .tab-slider-section .tab-content-wrap .swiper-container .swiper-wrapper .contentSlide a .galleryIMG .galleryT h5 { margin: 0; font-size: 1.2rem; line-height: 3; color: #fff; }
#main5 .main5M .tab-slider-section .tab-content-wrap .swiper-prev { position: absolute; transform: translate(-50%, -50%); top: 50%; left: -2%; z-index: 9999; cursor: pointer; }
#main5 .main5M .tab-slider-section .tab-content-wrap .swiper-next { position: absolute; transform: translate(50%, -50%); top: 50%; right: -2%; z-index: 9999; cursor: pointer; }
#main5 .main5M .more-btn-wrap { text-align: center; margin-top: 60px; display: flex; justify-content: center; }
#main5 .main5M .more-btn-wrap .circle { padding: 15px; display: inline-block; position: relative; }
#main5 .main5M .more-btn-wrap .circle .on, #main5 .main5M .more-btn-wrap .circle .off { width: 100%; height: 100%; top: 0; right: 0; position: absolute; background-repeat: no-repeat; background-size: auto; background-position: center; }
#main5 .main5M .more-btn-wrap .circle .on { opacity: 0; transition: 0.3s all ease; }
#main5 .main5M .more-btn-wrap .circle .off { opacity: 1; transition: 0.3s all ease; }
#main5 .main5M .more-btn-wrap .circle:hover .on { opacity: 1; transition: 0.3s all ease; }
#main5 .main5M .more-btn-wrap .circle:hover .off { opacity: 0; transition: 0.3s all ease; }

/* [ Main 6: 선교 ] */
#main6 { padding: 6.5vw 0 7vw; }
#main6 .main6T { display: flex; flex-direction: column; align-items: center; text-align: center; }
#main6 .main6T h5 { margin: 0 0 2.9vw; font-size: 1rem; color: rgba(255, 255, 255, .7); }
#main6 .main6T h3 { margin: 0 0 1.5vw; font-size: .9rem; letter-spacing: 0.2rem; color: #0098ff; }
#main6 .main6T h1 { margin: 0 0 5vw; font-size: 2.7rem; color: #fff; }
#main6 .main6M { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 30px; }
#main6 .main6M .main6HF { height: 7.8vw; position: relative; background-color: #fff; cursor: pointer; transition: all 0.4s ease; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
#main6 .main6M .main6HF:hover { background-color: #007bff; transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,123,255,0.3); }
#main6 .main6M .main6HF:before { background-color: #007bff; }
#main6 .main6M .main6HF h1 { margin: 0; font-size: 1.5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.4s ease, color 0.4s ease; }
#main6 .main6M .main6HF:hover h1 { color: #fff; transform: translate(-50%, -50%) scale(1.1); }

/* [ Main 7: 하단 아이콘 메뉴 ] */
#main7 .main7M { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; margin: 3vw 0 3vw; }
#main7 .main7M .main7BT { text-align: center; display: flex; gap: 10px; flex-direction: column; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); color:#000;}
#main7 .main7M .main7BT:hover { transform: translateY(-10px); }
#main7 .main7M .main7BT .circle { padding: 40px; display: inline-block; position: relative; }
#main7 .main7M .main7BT .circle .on, #main7 .main7M .main7BT .circle .off { width: 100%; height: 100%; top: 0; right: 0; position: absolute; background-repeat: no-repeat; background-size: contain; background-position: center; }
#main7 .main7M .main7BT .circle .on { opacity: 0; transition: 0.3s all ease; }
#main7 .main7M .main7BT .circle .off { opacity: 1; transition: 0.3s all ease; }
#main7 .main7M .main7BT:hover .circle .on { opacity: 1; transition: 0.3s all ease; }
#main7 .main7M .main7BT:hover .circle .off { opacity: 0; transition: 0.3s all ease; }
#main7 .main7M .main7BT h1 { margin: 0; font-size: 1rem; }

/* ========================================================
   [ NEW ] 사역과 프로그램 (Ministry) 
======================================================== */
.min-sec { padding: 6vw 0; background-color: #fff; }
.min-header { text-align: center; margin-bottom: 3vw; }
.min-header .sec-label { font-size: 0.9rem; color: #3b82f6; font-weight: bold; letter-spacing: 0.2rem; margin-bottom: 1vw; }
.min-header .sec-title { font-size: 2.7rem; font-weight: bold; color: #000; }

/* PC Desktop Panels (가로 아코디언) */
.min-panels-desktop { display: flex; gap: 20px; height: 500px; width: 100%; margin-top: 40px; }
.min-panels-desktop .min-panel {
    position: relative;
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}
/* 이미지 어둡게 덮어주기 (글자 가독성) */
.min-panels-desktop .min-panel::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
    z-index: 1;
}

/* PC 마우스 오버 시에만 넓어짐 */
.min-panels-desktop .min-panel.active { flex: 2.5; }

.min-panel .panel-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px; color: #fff; z-index: 2; }
.min-panel .panel-tag { font-size: 0.85rem; font-weight: bold; color: #ffca28; margin-bottom: 10px; }
.min-panel .panel-title { font-size: 2rem; font-weight: bold; margin: 0 0 15px; }

/* 기본적으로 텍스트/버튼은 숨김 */
.min-panel .panel-hidden { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.5s ease; }
/* active 될 때만 보임 */
.min-panels-desktop .min-panel.active .panel-hidden { max-height: 300px; opacity: 1; margin-top: 15px; }

.min-panel .panel-desc { font-size: 1rem; margin-bottom: 20px; line-height: 1.5; color: rgba(255,255,255,0.9); }
.min-panel .dept-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.min-panel .dept-pills a { padding: 8px 16px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); border-radius: 30px; font-size: 0.9rem; color: #fff; transition: 0.3s; }
.min-panel .dept-pills a:hover { background: #fff; color: #000; }

/* 모바일 패널 컨테이너 (기본 숨김) */
.min-panels-mobile { display: none; }

/* ========================================================
   🚨 Swiper 무한 확대 팽창 버그 강제 차단 (킬스위치) 🚨
======================================================== */

/* 1. Swiper 컨테이너가 부모 넓이를 무시하고 폭주하는 현상 차단 */
.swiper, 
.swiper-container,
.nextgen-swiper,
.alb-swiper {
    width: 100% !important;
    min-width: 0 !important; /* Flex 레이아웃 안에서 폭주를 막는 핵심 키워드 */
    max-width: 100vw !important; /* 화면 크기 밖으로 나가는 것 원천 차단 */
    overflow: hidden !important;
}

/* 2. 내부 Wrapper 계산 오류 방지 */
.swiper-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. 개별 슬라이드가 5000px 씩 들어가는 인라인 스타일 강제 무력화 */
.swiper-slide {
    max-width: 100% !important; /* 슬라이드 하나가 부모 너비를 절대 넘지 못하게 제한 */
    box-sizing: border-box !important;
}

/* 캡처 화면에 나온 갤러리/다음세대 카드 이미지 폭주 방지 */
.swiper-slide .slide-card,
.swiper-slide .img-box {
    width: 100% !important;
    max-width: 100vw !important;
}

/* ========================================================
   4. 반응형 미디어 쿼리 (Media Queries)
======================================================== */

/* [ 노트북 / 데스크톱 ] 1499px 이하 해상도 */
@media (max-width: 1499px) {
    #main2 .main2M { grid-template-columns: repeat(4, 1fr); gap: 4vw 0; }
    #main3 .main3TM .sermonM .sermonT .sermonHF h1 { font-size: 2.8rem; }
    #main5 .main5M .tab-slider-section .tab-content-wrap .swiper-prev { left: 0; }
    #main5 .main5M .tab-slider-section .tab-content-wrap .swiper-next { right: 0; }
    #main7 .main7M { margin: 3vw 2vw; }
}

/* [ 소형 데스크톱 / 가로형 태블릿 ] 1199px 이하 해상도 */
@media (max-width: 1199px) {
    #main2 .main2T h1 { font-size: 2.3rem; }
    #main3 .main3BM { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .main4-left { width: 45vw; }
    #main5 .main5T h1 { font-size: 2.3rem; }
    #main6 .main6T h1 { font-size: 2.3rem; }
    #main6 .main6M { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    #main6 .main6M .main6HF { height: 12vw; }
    #main7 .main7M { grid-template-columns: repeat(4, 1fr); gap: 30px 10px; }
    
    .min-panels-desktop { height: 400px; } /* 데스크탑 패널 높이 축소 */
}

/* ========================================================
   [세로형 태블릿] 992px 이하 해상도
======================================================== */
@media (max-width: 992px) {
    #main3 .main3TM { height: auto; padding: 6vw; }
    #main3 .main3TM .sermonM .sermonT .sermonHF h1 { width: 100%; }
    #main3 .main3BM { grid-template-columns: 1fr; }
    #main3 .main3BM .worshipM .worshipT { height: 18vw; }

    .main4-bleed-wrap { flex-direction: column; padding: 0 5vw; } 
    .main4-left { width: 100%; max-width: 100%; margin-right: 0; margin-bottom: 3rem; }
    .featured-card { aspect-ratio: 4 / 3; }
    .nextgen-swiper { margin-right: -5vw !important; padding-right: 5vw !important; overflow: hidden !important; }
    .slider-controls { display: flex !important; padding-right: 0; }
    .slider-controls .nav-buttons { display: none !important; }
    .custom-progress { width: 100% !important; }
    
    #main5 .main5M .tab-slider-section .tab-content-wrap { margin: 0 -5vw; padding: 0 5vw; }
    #main5 .main5M .tab-slider-section .tab-content-wrap .swiper-container .swiper-wrapper .contentSlide a .galleryIMG { height: 25vw; }
    #main5 .main5M .tab-slider-section .tab-content-wrap .swiper-prev { display: none !important; left: 2%; }
    #main5 .main5M .tab-slider-section .tab-content-wrap .swiper-next { display: none !important; right: 2%; }
    
    #main7 .main7M { gap: 40px 15px; }
    #main7 .main7M .main7BT .circle { padding: 30px; }

    /* ★ 사역(Ministry) 모바일/태블릿 전환 ★ */
    .min-panels-desktop { display: none !important; } /* PC 전용 숨김 */
    .min-panels-mobile { display: block !important; margin-top: 30px; } /* 모바일 스와이퍼 노출 */
    
    /* 모바일 스와이프 내 패널 (이미지 무한확대 완벽 차단) */
    .min-panels-mobile .min-panel {
        flex: none !important; 
        width: 100% !important; 
        height: 70vw !important; /* 모바일 높이 지정 */
        max-height: 450px !important;
        background-size: cover !important; 
        background-position: center !important; 
        border-radius: 20px; 
        overflow: hidden;
        position: relative;
    }
    .min-panels-mobile .min-panel::before {
        content: ''; position: absolute; inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
        z-index: 1;
    }
    /* 모바일에서는 버튼과 텍스트를 항상 노출시킴 */
    .min-panels-mobile .panel-hidden { max-height: 500px; opacity: 1; margin-top: 15px; } 
}

/* [ 모바일 ] 767px 이하 해상도 */
@media (max-width: 767px) {
    .row{margin:0;}
    #main2 .main2M { grid-template-columns: repeat(2, 1fr); gap: 6vw 0; }
    #main3 .main3TM .sermonM .sermonT .sermonHF h1 { font-size: 2rem; }
    #main3 .main3TM .sermonM .sermonT > h5{padding: 0 0 15vw;}
    #main3 .main3TM .sermonM .sermonT .sermonHF .circle { padding: 30px; }
    #main3 .main3BM .worshipM .worshipT { height: 25vw; }
    #main4{margin: 3rem 0;}
    #main5 .main5M .tab-slider-section .tab-content-wrap .swiper-container .swiper-wrapper .contentSlide a .galleryIMG { height: 45vw; }
	#main5 .main5M .tab-slider-section .tab-content-wrap .swiper-container .swiper-wrapper .contentSlide a .galleryIMG .galleryT{padding:5vw;}
	#main6 .main6T h5{font-size:1.1rem;word-break: keep-all;line-height: 1.2;}
    #main6 .main6M { grid-template-columns: 1fr 1fr; }
    #main6 .main6M .main6HF { height: 18vw; }
	#main6 .main6M .main6HF h1{font-size:1.3rem;width: 100%;text-align: center;}
    
    #main7 .main7M { grid-template-columns: repeat(3, 1fr); gap: 6vw 2vw; margin: 5vw 0; }
    #main7 .main7M .main7BT .circle { padding: 25px; }
    #main7 .main7M .main7BT h1 { font-size: 0.85rem; letter-spacing: -1px; }

    /* 사역(Ministry) 모바일 폰트 최적화 */
    .min-header .sec-title { font-size: 2.2rem; }
    .min-panel .panel-title { font-size: 1.6rem; margin-bottom: 10px; }
    .min-panel .panel-desc { font-size: 0.9rem; }
    .min-panel .dept-pills a { font-size: 0.8rem; padding: 6px 12px; }
}

/* [ 소형 모바일 ] 340px 이하 해상도 */
@media (max-width: 340px) {
    #main2 .main2T h1 { font-size: 1.8rem; }
    #main2 .main2M { grid-template-columns: 1fr; gap: 8vw 0; }
    #main3 .main3BM .worshipM .worshipT { height: 35vw; }
    .featured-card .card-text h2 { font-size: 2rem; }
    .featured-card .card-text .verse { font-size: 0.85rem; }
    #main5 .main5T h1 { font-size: 1.8rem; }
    #main6 .main6T h1 { font-size: 1.8rem; }
    #main6 .main6M .main6HF { height: 25vw; }
    
    #main7 .main7M { grid-template-columns: repeat(2, 1fr); gap: 8vw 2vw; }
    #main7 .main7M .main7BT .circle { padding: 30px; }
    #main7 .main7M .main7BT h1 { font-size: 1rem; }
    
    .min-panels-mobile .min-panel { height: 100vw !important; } /* 초소형 모바일 높이 증가 */
}