@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
/* --- RESET & VARIABLES --- */
        :root {
            /* COLORS */
            --primary-blue: #00b4d8; 
            --deep-blue: #023e8a;
            --navy-accent: #253A63; 
            --text-point: #a71f5e; 
            --gold-accent: #ffd700; 
            --text-white: #ffffff;
            
            /* ADJUSTABLE PASTOR SECTION BG */
            --pastor-bg-gradient: #f4f7f9;
            /* DIMENSIONS */
            --header-height: 80px;
            --header-height-scrolled: 60px;
        }

        /* --- SMOOTH PAGE LOAD FADE --- */
body {
    opacity: 0; /* Hide the page initially */
    transition: opacity 0.4s ease-in-out; /* Smooth fade effect */
}

body.loaded {
    opacity: 1; /* This class is added by JS after the header loads */
}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* --- SCROLL SNAP (PC) --- */
        html { scroll-behavior: smooth; }

        @media (min-width: 1024px) {
            html.scroll-snap-page, body.scroll-snap-page {
                height: 100%;
                overflow-y: scroll;
                scroll-snap-type: y mandatory;
            }
            body.scroll-snap-page section {
                height: 100vh;
                scroll-snap-align: start;
                width: 100%;
                position: relative;
            }

            html.scroll-snap-page, body.scroll-snap-page {
        height: 100%;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
    }
    body.scroll-snap-page section {
        height: 100vh;
        scroll-snap-align: start;
        width: 100%;
        position: relative;
    }

    /* ADD THIS: Handle the footer scroll snap */
    body.scroll-snap-page #footer-placeholder {
        scroll-snap-align: end; 
    }

        }

        /* --- MOBILE LAYOUT --- */
        @media (max-width: 1023px) {
            html.scroll-snap-page, body.scroll-snap-page {
                height: auto;
                scroll-snap-type: none;
                overflow-x: hidden;
            }
            body.scroll-snap-page section {
                height: auto;
                min-height: 100svh;
                position: relative;
            }
        }

        body {
            font-family: 'Pretendard', sans-serif;
            background-color: #fff;
        }

        a { text-decoration: none; color: inherit; transition: 0.3s; }
        ul { list-style: none; }

        /* --- HEADER --- */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: var(--header-height);
            z-index: 1100; 
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 40px; 
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s ease;
        }

        header.scrolled {
            height: var(--header-height-scrolled);
            background: rgba(32, 52, 153, 0.95);
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            border-bottom: none;
        }

        .logo-container { height: 100%; display: flex; align-items: center; }
        .logo-img { height: 55px; width: auto; transition: height 0.4s ease; }
        header.scrolled .logo-img { height: 38px; }

        /* --- DESKTOP NAVIGATION --- */
        .nav-menu {
            position: absolute; left: 50%; transform: translateX(-50%);
            display: flex; gap: 40px; height: 100%; align-items: center;
        }
        .nav-item { position: relative; height: 100%; display: flex; align-items: center; cursor: pointer; }
        .nav-link {
            font-size: 17px; font-weight: 500; color: white; padding: 10px 0; position: relative;
            transition: font-size 0.4s ease, color 0.3s;
        }
        header.scrolled .nav-link { font-size: 15px; }

        .nav-link::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
            background-color: var(--primary-blue); transform: scaleX(0); transform-origin: left;
            transition: transform 0.3s ease-in-out;
        }
        .nav-item:hover .nav-link::after { transform: scaleX(1); }
        .nav-item:hover .nav-link { color: var(--primary-blue); }

        .dropdown {
            position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(20px); 
            width: 160px; background: rgba(255, 255, 255, 0.98); border-radius: 12px;
            padding: 15px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.3); opacity: 0; visibility: hidden;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
        .dropdown li a { display: block; color: #333; padding: 10px 20px; font-size: 14px; text-align: center; font-weight: 600; }
        .dropdown li a:hover { background-color: #f0f8ff; color: var(--deep-blue); }

        .auth-buttons { display: flex; gap: 15px; font-size: 14px; }
        .btn-auth {
            border: 1px solid white; color: white; padding: 8px 18px; border-radius: 20px; transition: all 0.3s;
        }
        header.scrolled .btn-auth { padding: 5px 14px; font-size: 13px; }
        .btn-auth:hover { background: var(--primary-blue); border-color: var(--primary-blue); color: white; }

        /* --- MOBILE MENU BUTTON --- */
        .mobile-menu-btn {
            display: none; position: relative; width: 30px; height: 20px;
            cursor: pointer; z-index: 1200; margin-right: 0;
        }
        .mobile-menu-btn span {
            display: block; position: absolute; left: 0; width: 100%; height: 2px;
            background-color: white; border-radius: 3px;
            transition: top 0.3s 0.3s ease, transform 0.3s 0s ease, opacity 0s 0.3s;
        }
        .mobile-menu-btn span:nth-child(1) { top: 0; }
        .mobile-menu-btn span:nth-child(2) { top: 9px; opacity: 1; }
        .mobile-menu-btn span:nth-child(3) { top: 18px; }

        .mobile-menu-btn.active span:nth-child(1) {
            top: 9px; transform: rotate(45deg); transition: top 0.3s 0s ease, transform 0.3s 0.3s ease;
        }
        .mobile-menu-btn.active span:nth-child(2) { opacity: 0; transition: opacity 0s 0.3s; }
        .mobile-menu-btn.active span:nth-child(3) {
            top: 9px; transform: rotate(-45deg); transition: top 0.3s 0s ease, transform 0.3s 0.3s ease;
        }

        /* --- MOBILE OVERLAY --- */
        .mobile-nav-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            background: rgba(15, 23, 42, 0.98); z-index: 1050; padding-top: 80px; 
            transform: translateY(-100%);
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            overflow-y: auto;
        }
        .mobile-nav-overlay.active { transform: translateY(0); }

        .mobile-nav-list { display: flex; flex-direction: column; width: 100%; }
        .mobile-nav-item { border-bottom: 1px solid rgba(255,255,255,0.05); }

        .mobile-nav-link {
            display: flex; justify-content: space-between; align-items: center;
            padding: 20px 30px; color: white; font-size: 18px; font-weight: 500;
        }
        .mobile-nav-link .arrow-icon { transition: transform 0.3s; font-size: 12px; }
        .mobile-nav-link.open .arrow-icon { transform: rotate(180deg); }

        .mobile-submenu {
            background: rgba(0,0,0,0.3); height: 0; overflow: hidden; opacity: 1;
            transition: height 800ms cubic-bezier(0.16, 1, 0.3, 1);
            will-change: height;
        }
        
        .mobile-submenu li a { display: block; padding: 12px 40px; color: #b0b8c4; font-size: 15px; }
        .mobile-submenu li a:hover { color: white; }
        .mobile-auth { display: flex; justify-content: center; gap: 15px; margin-top: 40px; padding-bottom: 40px; }
        .mobile-auth .btn-auth { font-size: 14px; font-weight: 500; padding: 8px 18px; }
        @media (max-width: 1023px) {
    /* JS가 display 속성을 강제해도 모바일에서는 상단 바 버튼이 무조건 안 보이게 !important 적용 */
    .nav-menu, .auth-buttons { display: none !important; }
    .mobile-menu-btn { display: block; } 
    header { padding: 0 20px; } 
}

        /* --- 1. HERO SECTION --- */
        .hero-container {
            overflow: hidden; background: #000; height: 100vh;
        }
        @media (max-width: 1023px) { .hero-container { height: 100svh; } }

        .slide {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease-in-out;
        }
        .slide.active { opacity: 1; }
       .slide-bg {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    filter: brightness(0.6); 
    
    /* Base state */
    transform: scale(1); 
    
    /* This handles BOTH the smooth zoom-in and the smooth zoom-out */
    transition: transform 7s linear; 
}

/* When active, scale it up */
.slide.active .slide-bg { 
    transform: scale(1.1); 
}
        .content {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            text-align: center; color: white; width: 90%; z-index: 10;
        }
        .content h1 {
            font-size: 4rem; margin-bottom: 25px; opacity: 0; text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        }
        .content p { font-size: 1.5rem; opacity: 0; font-weight: 300; }
        @media (max-width: 768px) {
            .content h1 { font-size: 2.5rem; } .content p { font-size: 1.1rem; }
        }
        @keyframes fadeUpBig {
            from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); }
        }
        .slide.active .content h1 { animation: fadeUpBig 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.3s; }
        .slide.active .content p { animation: fadeUpBig 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.6s; }

        .arrow {
            position: absolute; top: 50%; transform: translateY(-50%);
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2);
            color: white; width: 60px; height: 60px; border-radius: 50%; font-size: 24px;
            cursor: pointer; z-index: 20; transition: 0.3s; display: flex; justify-content: center; align-items: center;
        }
        .arrow:hover { background: var(--primary-blue); border-color: var(--primary-blue); }
        .prev { left: 40px; } .next { right: 40px; }
        @media (max-width: 768px) { .arrow { width: 40px; height: 40px; font-size: 18px; } .prev { left: 10px; } .next { right: 10px; } }

        /* --- 2. ABOUT SECTION --- */
        .about-section {
            background: radial-gradient(circle at center, #ffffff 0%, #f0f4f8 100%);
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            text-align: center; padding: 0 20px; padding-top: calc(var(--header-height) + 60px); padding-bottom: 100px;
        }
        .about-container { max-width: 1200px; width: 100%; }
        .about-title {
            font-size: 3rem; font-weight: 800; color: var(--navy-accent); margin-bottom: 20px;
            opacity: 0; transform: translateY(30px); transition: all 1s ease-out;
        }
        .about-subtitle {
            font-size: 1.1rem; color: #555; line-height: 1.8; margin-bottom: 60px;
            font-weight: 500; opacity: 0; transform: translateY(30px); transition: all 1s ease-out; transition-delay: 0.2s;
        }
        .highlight-text { color: var(--text-point); font-weight: bold; }
        .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; }

         
        
        .card {
            background: white; padding: 40px 30px; border-radius: 20px;
            box-shadow: 0 10px 30px rgba(37, 58, 99, 0.08); 
            transition: all 1.5s cubic-bezier(0.2, 1, 0.3, 1); opacity: 0; transform: translateY(50px) scale(0.95);
            position: relative; overflow: hidden;
        }

        /* Create the hidden blue line at the bottom of the card */
.card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* Start with 0 width */
    height: 4px;
    background-color: var(--primary-blue);
    transition: width 0.5s ease;
}

/* Make the line expand to 100% on hover */
.card:hover::after {
    width: 100%;
}

/* Optional: If you want the card to also "lift up" like the worship cards */
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

        .card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(37, 58, 99, 0.15); transition-duration: 0.4s; }
        
        .card-icon { width: 60px; height: 60px; margin: 0 auto 20px; fill: var(--navy-accent); }
        .card h3 { font-size: 1.4rem; color: var(--navy-accent); margin-bottom: 15px; }
        .card p { font-size: 1rem; color: #666; line-height: 1.6; word-break: keep-all; }
        
        @media (max-width: 900px) {
            .cards-grid { grid-template-columns: 1fr; gap: 20px; }
            .about-title { font-size: 2rem; } .about-subtitle { font-size: 1rem; }
            .card::after { width: 100%; } /* Force blue hover line on mobile */
        }
        
        .visible .about-title, .visible .about-subtitle { opacity: 1; transform: translateY(0); }
        .visible .card { opacity: 1; transform: translateY(0) scale(1); }
        .visible .card:nth-child(1) { transition-delay: 0.4s; }
        .visible .card:nth-child(2) { transition-delay: 0.7s; }
        .visible .card:nth-child(3) { transition-delay: 1.0s; }


  /* --- 3. PASTOR SECTION --- */
.pastor-section {
    background: #f4f7f9; /* Original Value */
    display: flex; justify-content: center; align-items: center;
    padding: 80px 20px; /* Original Value */
    overflow: hidden;
    position: relative; 
}

/* 앰비언트 빛 효과 */
.ambient-background {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; 
}
.orb { position: absolute; border-radius: 50%; filter: blur(90px); animation: floatOrb 20s infinite alternate ease-in-out; }
.orb-1 { width: 55vw; height: 65vw; background: rgba(0, 180, 216, 0.2); top: -10%; left: -10%; } 
.orb-2 { width: 45vw; height: 55vw; background: rgba(167, 31, 94, 0.1); bottom: -10%; right: -5%; animation-delay: -5s; }
@keyframes floatOrb { to { transform: translate(80px, 40px) scale(1.1); } }

/* 컨텐츠 컨테이너 */
.pastor-container {
    max-width: 1100px; width: 100%;
    display: flex; justify-content: space-between; align-items: center; gap: 130px; /* Original Value */
    position: relative; z-index: 2;
}

/* --- SLIDE ANIMATION LOGIC --- */

/* Initial Hidden State */
.pastor-image-wrapper {
    flex: 1; display: flex; justify-content: flex-end;
    opacity: 0;
    transform: translateX(-50px); /* Slide from left */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.pastor-text {
    flex: 1; text-align: left; 
    opacity: 0;
    transform: translateX(50px); /* Slide from right */
    transition: opacity 1s ease-out, transform 1s ease-out;
    transition-delay: 0.2s; 
}

/* Reveal State: Works if .visible is on the section OR the wrapper itself */
.visible .pastor-image-wrapper,
.visible .pastor-text,
.pastor-image-wrapper.visible,
.pastor-text.visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* --- DESIGN (ALL ORIGINAL VALUES PRESERVED) --- */
.pastor-img {
    width: 380px; height: auto; border-radius: 20px;
    box-shadow: 20px 20px 0px rgba(0, 180, 216, 0.15); 
    border: 1px solid rgba(0,0,0,0.05);
}

.pastor-name { font-size: 3rem; font-weight: 800; margin-bottom: 30px; color: var(--navy-accent); }
.pastor-name span { color: var(--primary-blue); }

.career-list { list-style: none; padding: 0; }
.career-list li {
    font-size: 1.1rem; margin-bottom: 12px; padding-left: 20px;
    position: relative; line-height: 1.6; 
    color: #555; 
}
.career-list li::before {
    content: '•'; color: var(--primary-blue); position: absolute; left: 0;
    font-size: 1.5rem; line-height: 1.2rem; top: 2px;
}

@media (max-width: 900px) {
    .pastor-container { flex-direction: column; text-align: center; gap: 40px; }
    .pastor-image-wrapper { justify-content: center; transform: translateY(30px); }
    .pastor-text { text-align: center; transform: translateY(30px); }
    .pastor-img { width: 80%; max-width: 300px; }
    .pastor-name { font-size: 2.2rem; margin-bottom: 20px; }
    .career-list { display: inline-block; text-align: left; margin: 0 auto; }
    .career-list li { width: 100%; max-width: 400px; padding-left: 20px; }
    .career-list li::before { position: absolute; left: 0; top: 2px; }
}
        /* --- 4. WORSHIP SECTION (UPDATED) --- */
.worship-section {
    background: #fff; /* Bright theme */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 100px 20px;
}

.worship-container { max-width: 1200px; width: 100%; }

.worship-header {
    /* Lowered the cards by increasing margin-bottom from 60px to 90px (+30px) */
    margin-bottom: 90px; 
    opacity: 0;
    transform: translateY(30px); 
    /* Slower, premium transition */
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.worship-title {
    font-size: 3rem; font-weight: 800; color: var(--navy-accent); margin-bottom: 15px;
}
.worship-subtitle { font-size: 1.2rem; color: #666; }

.worship-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%;
}

.worship-card {
    background: white; border-radius: 20px; padding: 50px 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.03);
    display: flex; flex-direction: column; align-items: center;
    position: relative; overflow: hidden;
    
    /* Initial state for animation */
    opacity: 0; 
    transform: translateY(50px); 
    /* Increased duration to 1.5s and added custom bezier for a 'weighty' feel */
    transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), 
                box-shadow 0.5s ease; 
}

/* Hover effect line (unchanged) */
.worship-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: var(--primary-blue); transform: scaleX(0);
    transition: transform 0.5s ease; transform-origin: left;
}

.worship-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0,0,0,0.12); }
.worship-card:hover::before { transform: scaleX(1); }

.worship-icon {
    font-size: 3rem; margin-bottom: 25px; width: 80px; height: 80px;
    border-radius: 50%; background: #f0f8ff; display: flex;
    justify-content: center; align-items: center; fill: var(--primary-blue);
}

.service-name { font-size: 1.5rem; font-weight: 700; color: var(--deep-blue); margin-bottom: 15px; }
.service-time { font-size: 1.8rem; font-weight: 800; color: var(--navy-accent); margin-bottom: 10px; }
.service-desc { color: #888; font-size: 1rem; }

/* --- TRIGGER ANIMATIONS (MATCHING YOUR JS) --- */

/* Ensure the section has the 'observer-target' class in your HTML */
.worship-section.visible .worship-header { 
    opacity: 1; 
    transform: translateY(0); 
}

.worship-section.visible .worship-card { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Slightly wider delays to emphasize the slow, premium reveal */
.worship-section.visible .worship-card:nth-child(1) { transition-delay: 0.3s; }
.worship-section.visible .worship-card:nth-child(2) { transition-delay: 0.6s; }
.worship-section.visible .worship-card:nth-child(3) { transition-delay: 0.9s; }

@media (max-width: 900px) { 
    .worship-grid { grid-template-columns: 1fr; } 
    .worship-header { margin-bottom: 50px; } /* Slightly tighter on mobile */
    .worship-title { font-size: 2.2rem; margin-bottom: 10px; }
    .worship-subtitle { font-size: 1rem; }
    .worship-card { padding: 30px 20px; }
    .worship-icon { width: 60px; height: 60px; margin-bottom: 15px; }
    .worship-icon svg { width: 30px; height: 30px; }
    .service-name { font-size: 1.3rem; margin-bottom: 10px; }
    .service-time { font-size: 1.5rem; margin-bottom: 5px; }
    .worship-card::before { transform: scaleX(1); } /* Force blue hover line on mobile */
}


        /* Map Section */
        .location-container {
            max-width: 1200px;
            width: 100%; margin: 0 auto;
            padding: 80px 20px;
        }

        .map-frame {
            width: 100%;
            height: 450px; background-color: #eee;
            border-radius: 20px; overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            margin-bottom: 50px; position: relative;
        }
        /* Placeholder for actual map */
        .map-placeholder {
            width: 100%;
            height: 100%; display: flex; justify-content: center; align-items: center;
            background-color: #f1f5f9; color: #666; font-size: 1.2rem; font-weight: bold; flex-direction: column; gap: 15px;
        }

        /* Info Grid - Reusing .card styles concept but adapted */
        .info-grid {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        .info-card {
            background: white; padding: 40px 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(37, 58, 99, 0.08);
            text-align: center; transition: transform 0.3s, box-shadow 0.3s; border: 1px solid rgba(0,0,0,0.03); display: flex; flex-direction: column; align-items: center;
        }
        .info-card:hover {
            transform: translateY(-10px); box-shadow: 0 20px 40px rgba(37, 58, 99, 0.12);
        }
        .info-icon {
            width: 60px; height: 60px;
            border-radius: 50%; background: #f0f8ff; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; fill: var(--primary-blue);
        }
        .info-title {
            font-size: 1.3rem;
            color: var(--navy-accent); margin-bottom: 15px; font-weight: 700;
        }
        .info-text {
            font-size: 1rem; color: #555; line-height: 1.6; word-break: keep-all;
        }
        .highlight { color: var(--text-point); font-weight: 600; }

        @media (max-width: 900px) {
            .info-grid { grid-template-columns: 1fr; }
            .map-frame { height: 300px; }
            .sub-hero { height: 300px; }
            .sub-hero h1 { font-size: 2.2rem; }
        }


     /* --- UPDATED: MINIMALIST MAP BUTTONS --- */
.map-buttons {
    display: flex;
    gap: 12px; /* Slightly tighter gap */
    margin-top: -20px;
    margin-bottom: 45px;
    justify-content: center;
}

.map-btn {
    padding: 10px 22px; /* Smaller padding */
    border-radius: 12px; /* Modern "Squircle-like" roundness to match the map info */
    font-size: 0.9rem;  /* Smaller font */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    text-align: center;
    min-width: 150px;    /* Reduced width */
    display: inline-block;
    border: none;       /* Clean look without borders */
}

/* NAVER: Soft Mint-Green background with deep green text */
.naver-btn {
    background-color: rgba(3, 199, 90, 0.2); 
    color: #029e47;
}

.naver-btn:hover {
    background-color: #03C75A;
    color: white;
    transform: translateY(-2px);
}

/* KAKAO: Soft Cream-Yellow background with charcoal text */
.kakao-btn {
    background-color: rgba(254, 229, 0, 0.4); 
    color: #3C1E1E;
}

.kakao-btn:hover {
    background-color: #FEE500;
    color: #3C1E1E;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .map-buttons {
        padding: 0 20px;
    }
    .map-btn {
        flex: 1; /* Helps them stay side-by-side on small screens if you prefer */
        min-width: auto;
    }
}

/* --- GLOBAL SUB-PAGE HERO (WAVE EFFECT) --- */
.sub-page-hero {
    height: 60vh; 
    min-height: 400px;
    padding-top: var(--header-height); /* Automatically adjust for header height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #023e8a 0%, #00b4d8 100%);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Moving Wave pseudo-elements */
.sub-page-hero::before,
.sub-page-hero::after {
    content: '';
    position: absolute;
    left: 0;
    width: 200%;
    bottom: -2px;
    background-repeat: repeat-x;
    background-position: 0 bottom;
    background-size: 50% 100%; 
}

.sub-page-hero::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 300" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,150 Q300,0 600,150 T1200,150 L1200,350 L0,350 Z" fill="%23ffffff"/></svg>');
    animation: wave-move 35s linear infinite; 
    z-index: 1;
    height: 260px; 
    opacity: 0.3;
}

.sub-page-hero::after {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 300" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,150 Q300,300 600,150 T1200,150 L1200,350 L0,350 Z" fill="%23ffffff"/></svg>');
    animation: wave-move 25s linear infinite reverse; 
    z-index: 2;
    height: 130px; 
}

@keyframes wave-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.sub-page-hero .hero-content {
    position: relative;
    z-index: 3;
}

.sub-page-hero .hero-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.05em;
}

.sub-page-hero .hero-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .sub-page-hero .hero-title { font-size: 2.2rem; }
    .sub-page-hero .hero-subtitle { font-size: 1rem; }
}

/* =========================================================
   [팝업창 및 이슈 수정 CSS (Squircle Design)]
   ========================================================= */

/* ✅ 1. 팝업창이 열렸을 때 홈페이지 배경 스크롤 차단 */
body.no-scroll {
    overflow: hidden !important; 
}

/* 로그인 후 사용자 표시 영역 */
.user-greeting { color: white; font-weight: 600; font-size: 15px; margin-right: 15px; }
#mobileUserGreeting { margin-bottom: 15px; margin-right: 0; font-size: 17px; color: var(--primary-blue); }


/* --- 로그인 후 상단 바 수직 중앙 정렬 --- */
#loggedInContainer {
    align-items: center; /* 핵심: 글자와 버튼의 높이를 완벽하게 가운데로 맞춰줍니다 */
}

/* 모바일 햄버거 메뉴 안에서의 인사말 정렬 보강 */
#mobileLoggedInContainer {
    flex-direction: column;
    align-items: center; 
    justify-content: center;
}

.user-greeting { 
    margin-bottom: 0; /* 불필요한 아래쪽 여백 제거로 삐뚤어짐 방지 */
}

/* 오버레이 바탕 */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    z-index: 9999; display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; }

/* 팝업 모서리 둥글게 (렌더링 버그 픽스 래퍼) */
.squircle-modal-wrapper {
    background: #ffffff; width: 100%; max-width: 440px; border-radius: 32px; 
    box-shadow: 0 24px 48px rgba(0,0,0,0.15); transform: translateY(20px) scale(0.98);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.modal-overlay.active .squircle-modal-wrapper { transform: translateY(0) scale(1); }

/* 내부 스크롤 영역 (이슈 1,2 완벽 해결) */
.squircle-modal-scroll {
    height: 520px;
    max-height: 85vh; 
    overflow-y: auto; /* ★이 부분이 스크롤을 만들어주는 핵심입니다! */
    padding: 40px 32px 0px 32px; 
    overscroll-behavior: contain;
}


/* 닫기 버튼 */
.modal-close {
    position: absolute; top: 24px; right: 28px; width: 32px; height: 32px; z-index: 10;
    background: #f0f0f5; border-radius: 50%; display: flex; justify-content: center; align-items: center;
    font-size: 20px; color: #888; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.modal-close:hover { background: #e0e0e5; color: var(--text-point); }

.modal-title { text-align: center; font-size: 24px; font-weight: 700; color: var(--navy-accent); margin-bottom: 30px; }

/* 탭 배경 슬라이딩 효과 (아이폰 스타일) */
.modal-tabs { position: relative; display: flex; background: #f0f0f5; border-radius: 16px; padding: 4px; margin-bottom: 30px; }
.modal-tabs::before {
    content: ''; position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px);
    background: #ffffff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); z-index: 0;
}
.modal-tabs.signup-active::before { transform: translateX(100%); }

.tab-btn {
    flex: 1; background: transparent; border: none; padding: 12px 0; font-size: 15px; font-weight: 600; color: #666;
    cursor: pointer; transition: color 0.3s; position: relative; z-index: 1;
}
.tab-btn.active { color: var(--deep-blue); }

/* 폼 요소 패딩 및 스크롤 잘림 방지 */
.auth-form { 
    display: none; flex-direction: column; gap: 16px; animation: fadeIn 0.4s ease; 
    padding-bottom: 40px; /* 여기서 하단 여유 공간 확보 */
}
.auth-form.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.input-group { display: flex; flex-direction: column; gap: 8px; }
.input-group label { font-size: 13px; font-weight: 600; color: #555; margin-left: 4px; }
.input-squircle {
    padding: 16px; border: 1.5px solid transparent; border-radius: 16px; 
    font-size: 15px; font-family: inherit; background: #f5f5f7; color: #333; transition: all 0.3s ease;
}
#loginForm .input-squircle { padding: 14px; }
.input-squircle::placeholder { color: #aaa; }
.input-squircle:focus { outline: none; background: #ffffff; border-color: var(--primary-blue); box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.15); }
select.input-squircle { cursor: pointer; appearance: none; }
textarea.input-squircle { resize: none; }

.checkbox-group { display: flex; align-items: center; gap: 10px; padding: 5px 4px; }
.checkbox-group label { font-size: 13px; color: #555; cursor: pointer; }
.checkbox-group input[type="checkbox"] { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #ccc; accent-color: var(--primary-blue); cursor: pointer; }

.btn-submit-squircle {
    margin-top: 10px; background-color: var(--deep-blue); color: white; border: none; padding: 18px; border-radius: 16px;
    font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 16px rgba(2, 62, 138, 0.2);
}
#loginForm .btn-submit-squircle { padding: 15px; margin-top: 5px; }
.btn-submit-squircle:hover { transform: translateY(-2px); background-color: var(--primary-blue); box-shadow: 0 12px 20px rgba(0, 180, 216, 0.3); }
.btn-submit-squircle:active { transform: translateY(0); }

.form-message { font-size: 14px; text-align: center; font-weight: 600; min-height: 20px; transition: color 0.3s; margin-bottom: -5px; }
.text-link { text-align: center; font-size: 13px; color: #888; text-decoration: none; margin-top: 0px; transition: color 0.2s; }
.text-link:hover { color: var(--deep-blue); }




/* --- 비밀번호 보기 아이콘 (Hover 효과 제거 & 항상 회색 유지) --- */
.password-wrapper {
    position: relative;
    display: block;
    width: 100%;
}
.password-wrapper .input-squircle {
    width: 100%;
    padding-right: 45px !important; 
}

/* 1. 기본 상태: 뜬 눈 아이콘 (회색: %23999999) */
.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 2;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* ❌ hover 효과(.toggle-password:hover)를 완전히 삭제했습니다. 마우스를 올려도 그대로입니다. */

/* 2. 활성화 상태: 감은 눈 아이콘 (여기도 똑같은 회색: %23999999 로 강제 고정!) */
.toggle-password.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'%3E%3C/path%3E%3Cline x1='1' y1='1' x2='23' y2='23'%3E%3C/line%3E%3C/svg%3E");
}

/* =========================================================
   [NEW: LOGGED IN USER PROFILE (PC & MOBILE)]
   ========================================================= */
#loggedInContainer {
    align-items: center;
    position: relative; /* For dropdown positioning */
}

.user-profile-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 25px;
    transition: background 0.3s;
}

.user-profile-wrapper:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Ensure greeting alignment */
.user-greeting { 
    color: white; font-weight: 600; font-size: 15px; margin: 0; margin-right: 0; 
}
#mobileUserGreeting { 
    margin-bottom: 0; margin-right: 0; font-size: 17px; color: var(--primary-blue); 
}

/* --- 새롭게 교체된 프로필 아이콘 스타일 (Lucide 선형 아이콘 호환) --- */
.profile-icon-box { 
    position: relative; width: 36px; height: 36px; flex-shrink: 0; 
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; aspect-ratio: 1 / 1;
}

.profile-circle { 
    width: 100%; height: 100%; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    color: white; /* 💡 Lucide 아이콘은 폰트처럼 이 color 속성을 따라갑니다 */
    overflow: hidden; aspect-ratio: 1 / 1;
}

/* 기존의 fill: white; 삭제됨 */
.profile-circle svg { width: 55%; height: 55%; }

/* 목사님 전용 금색 띠 (Belt) */
.belt-pastor { 
    background-color: #f0c63d; 
    padding: 2.4px; 
}
.belt-pastor .profile-circle { 
    border: none; box-sizing: border-box; 
}

/* 직분별 배경색 */
.role-admin { background-color: #001F3F; }
.role-pastor { background-color: #800020; }
.role-mplus { background-color: #e9e596; color: #555 !important; } /* Member+는 진회색 선 */
.role-worship { background-color: #5c7532; }
.role-member { background-color: #8dcfe9; }
.role-pending { background-color: #acacac; }

/* Profile Dropdown Menu (PC) */
.profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: white;
    border-radius: 12px;
    width: 150px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.profile-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-dropdown button {
    width: 100%;
    padding: 12px 20px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
}

.profile-dropdown button:hover {
    background-color: #f0f8ff;
    color: var(--primary-blue);
}

.profile-dropdown button.logout-text {
    color: var(--text-point);
    border-top: 1px solid #eee;
}

.profile-dropdown button.logout-text:hover {
    background-color: #fff0f5;
}

/* --- LOGGED IN USER PROFILE (MOBILE) --- */
#mobileLoggedInContainer {
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    gap: 20px; /* Space between profile and menu */
}

.mobile-profile-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-profile-menu {
    display: flex;
    gap: 15px;
}

.mobile-profile-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.mobile-profile-btn.logout {
    color: #ffb3c6; /* Soft red for logout */
    border-color: rgba(255, 179, 198, 0.3);
}