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

/* =========================================
   ✨ 세련된 호버(Hover) 애니메이션
   ========================================= */

/* 1. 아이콘 버튼 공통 (둥둥 뜨는 느낌 + 아이콘 크로스페이드) */
#intro2 .intro2M .intro2BT .circle,
#intro5 .intro5M a .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);
}
#intro2 .intro2M .intro2BT:hover .circle,
#intro5 .intro5M a:hover .circle {
    transform: translateY(-8px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.08);
}
#intro2 .intro2M .intro2BT .circle .on, #intro5 .intro5M a .circle .on { opacity: 0; transition: opacity 0.3s ease-in-out; }
#intro2 .intro2M .intro2BT .circle .off, #intro5 .intro5M a .circle .off { opacity: 1; transition: opacity 0.3s ease-in-out; }
#intro2 .intro2M .intro2BT:hover .circle .on, #intro5 .intro5M a:hover .circle .on { opacity: 1; }
#intro2 .intro2M .intro2BT:hover .circle .off, #intro5 .intro5M a:hover .circle .off { opacity: 0; }
#intro2 .intro2M .intro2BT h1, #intro5 .intro5M a h1 { transition: color 0.3s ease; }
#intro2 .intro2M .intro2BT:hover h1, #intro5 .intro5M a:hover h1 { color: #5a7a5a; /* 브랜드 컬러 포인트 */ }

/* 2. 라이브 방송 배너 호버 */
#intro3 .intro3M { transition: transform 0.5s ease, box-shadow 0.5s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
#intro3 .intro3M:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
#intro3 .intro3M .intro3R .intro3HF { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#intro3 .intro3M:hover .intro3R .intro3HF { transform: scale(1.15); filter: brightness(1.1); }

/* 3. 홈페이지/유튜브 바로가기 버튼 호버 */
#intro4 .intro4TM .homeHF, #intro4 .intro4TM .youtuHF { transition: all 0.3s ease; }
#intro4 .intro4TM .homeHF:hover, #intro4 .intro4TM .youtuHF:hover { background-color: #7090ab; border-color: #7090ab; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(112, 144, 171, 0.3); }
#intro4 .intro4TM .homeHF:hover .homeHFM h1, #intro4 .intro4TM .youtuHF:hover .youtuHFM h1 { color: #fff; }

/* 4. 예배 시간표 카드 호버 */
#intro4 .intro4BM a { transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden;}
/*
#intro4 .intro4BM a:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
#intro4 .intro4BM a:hover .intro4BT h1 { color: #3d81ff; }
    */

/* 실제 적용 예시 */
body {
    font-family: 'Pretendard Variable', sans-serif;
}
#introBG{background-color:#E8F2F6;}
#introT{padding:35px 0;text-align:center;}
#intro1 .swiper-container{border-radius:20px;}
#intro2{}
#intro2 .intro2M{display:grid; grid-template-columns: repeat(5, 1fr);justify-items: center;text-align: center;padding:20px 0;}
#intro2 .intro2M .intro2BT{text-decoration:none;}
#intro2 .intro2M .intro2BT .circle{padding:3rem;position:relative;display:inline-block;background-color: #F5F9FD;border-radius: 15px;margin: 0 0 15px;}
#intro2 .intro2M .intro2BT .circle .on,
#intro2 .intro2M .intro2BT .circle .off{position:absolute;top:0;right:0;width:100%;height:100%;background-repeat: no-repeat;background-position: center;background-size: 60%;}
#intro2 .intro2M .intro2BT h1{margin:0;font-size:1.1rem;font-weight:500;color:#000;}

#intro3{}
#intro3 .intro3M{display: grid; grid-template-columns: repeat(2, 1fr);padding:4rem;background-repeat: no-repeat;background-position: center;background-size: cover;border-radius: 15px;}
#intro3 .intro3M .intro3L{}
#intro3 .intro3M .intro3R{display: flex;justify-content: flex-end;}
#intro3 .intro3M .intro3R .intro3HF{padding: 2.2rem;display: inline-block;background-repeat: no-repeat;background-position: center;background-size: contain;}

#intro4{}
#intro4 .intro4TM{display: flex; flex-direction: column;align-items: flex-start;padding: 6rem;gap: 1rem;background-repeat: no-repeat;background-position: top center;background-size: cover;}
#intro4 .intro4TM .homeHF{position: relative;padding: 2.2rem 9.3rem;display: inline-block;border: solid 3px #7090ab;border-radius: 15px;background-color: #fff;}
#intro4 .intro4TM .homeHF .homeHFM{width:100%;display: flex;align-items: center;justify-content: center;gap: 1.5rem;position: absolute;transform: translate(-50%, -50%);top: 50%;left: 50%;}
#intro4 .intro4TM .homeHF .homeHFM h1{margin: 0; font-size: 1.1rem;color:#000;font-weight:bold;}
#intro4 .intro4TM .youtuHF{position: relative;padding: 2.2rem 9.3rem;display: inline-block;border: solid 3px #7090ab;border-radius: 15px;background-color: #fff;}
#intro4 .intro4TM .youtuHF .youtuHFM{width:100%;display: flex;align-items: center;justify-content: center;gap: 1.5rem;position: absolute;transform: translate(-50%, -50%);top: 50%;left: 50%;}
#intro4 .intro4TM .youtuHF .youtuHFM h1{margin: 0; font-size: 1.1rem;color:#000;font-weight:bold;}

#intro4 .intro4BM{display:grid; grid-template-columns: repeat(4, 1fr);gap:1rem;margin-top: -75px;}
#intro4 .intro4BM a{position:relative;padding: 2.7rem 0;display: inline-block;border-radius: 15px;background-color:#fff;border-radius:15px;}
#intro4 .intro4BM a .intro4BT{width:100%;text-align:center;display: flex;flex-direction: column;align-items: center;position:absolute;transform: translate(-50%, -50%);top: 50%;left: 50%;}
#intro4 .intro4BM a .intro4BT h1{margin:0;font-size:.9rem;color:#000;font-weight:bold;}
#intro4 .intro4BM a .intro4BT hr{margin:10px 0;width: 10%;border-color: #dedede;}
#intro4 .intro4BM a .intro4BT h5{margin:0;font-size:.8rem;color:#3d81ff;}

#intro5{padding: 30px 0 90px;}
#intro5 .intro5M{display: grid; grid-template-columns: repeat(5, 1fr);}
#intro5 .intro5M a{text-align:center;}
#intro5 .intro5M a .circle{padding:3rem;position:relative;display:inline-block;background-color: #A1C4DD;border-radius: 50%;margin: 0 0 15px;}
#intro5 .intro5M a .circle .on,
#intro5 .intro5M a .circle .off{position:absolute;top:0;right:0;width:100%;height:100%;background-repeat: no-repeat;background-position: center;background-size: 60%;}
#intro5 .intro5M a h1{margin:0;font-size:1.1rem;color:#000;font-weight:bold;}

#intro6{display: flex;flex-direction: column;align-items: center;gap: 35px;padding: 50px 0 55px;}

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

@media (max-width: 1499px) {}

@media (max-width: 1199px) {

}

@media (max-width: 992px) {
    #intro4 .intro4BM { grid-template-columns: repeat(6, 1fr); margin-top: -40px; gap: 15px; }
    #intro4 .intro4BM .three{grid-column: span 3;}
    #intro4 .intro4BM .two{grid-column: span 2;}
    #intro4 .intro4TM { padding: 4rem 2rem; }
}

@media (max-width: 767px) {
    .row{margin:0;}
    .swiper-button-prev, .swiper-button-next{background-size: 13px 25px!important;}
    /* 모바일: 전면 재배치 (레이아웃 붕괴 방지) */
    
    #introT img{width: 50%;}
    /* 상하단 아이콘 영역: 3열 유지하되 크기 대폭 축소 */
    #intro2 .intro2M, #intro5 .intro5M { grid-template-columns: repeat(5, 1fr); gap: 15px 10px; }
    #intro2 .intro2M .intro2BT .circle, #intro5 .intro5M a .circle { margin: 0 0 8px; padding: 2rem; }
    #intro2 .intro2M .intro2BT h1, #intro5 .intro5M a h1 { font-size: 0.8rem; }
    #intro2 .intro2M .intro2BT .circle .on, #intro2 .intro2M .intro2BT .circle .off,
    #intro5 .intro5M a .circle .on, #intro5 .intro5M a .circle .off{background-size: 60%;}

    /* 라이브 방송 배너: 1열 세로 배치 */
    #intro3 .intro3M {padding: 2.5rem; gap: 20px; text-align: center; }
    #intro3 .intro3M .intro3R { justify-content: center; }
    #intro3 .intro3M .intro3R .intro3HF{padding: 1.2rem;}
    #intro3 .intro3M .intro3L img { max-width: 100%; height: auto; }

    /* 홈페이지/유튜브 버튼 영역: absolute 해제 후 버튼 100% 꽉 채우기 */
    #intro4 .intro4TM { padding: 2rem 1.5rem 5rem; gap: 1rem; align-items: stretch; background-size: cover; background-position:right bottom; }
    #intro4 .intro4TM .homeHF, #intro4 .intro4TM .youtuHF { padding: 1rem; width: 60%; border-radius: 12px; }
    #intro4 .intro4TM .homeHF .homeHFM, #intro4 .intro4TM .youtuHF .youtuHFM { position: relative; transform: none; top: auto; left: auto; flex-direction: column; gap: .5rem; }
    #intro4 .intro4TM .homeHF .homeHFM img, #intro4 .intro4TM .youtuHF .youtuHFM img {max-width:35px;}
    #intro4 .intro4TM .homeHF .homeHFM h1, #intro4 .intro4TM .youtuHF .youtuHFM h1 {font-size:.9rem;}
    
    /* 예배 시간표: 2열 유지, 높이 축소 */
    #intro4 .intro4BM { margin-top: -40px; gap: 10px; padding: 0 10px;}
    #intro4 .intro4BM a { padding: 1.2rem 0; }
    #intro4 .intro4BM a .intro4BT { position: relative; transform: none; top: auto; left: auto; }
    #intro4 .intro4BM a .intro4BT h1 { font-size: 1rem; }
    #intro4 .intro4BM a .intro4BT h5 { font-size: 0.9rem; }

    #intro5 {padding: 30px 0 40px;}
    
    #intro6 { padding: 0 0 30px; gap: 20px; }
}