/* =========================================
       [0] 그누보드 충돌 방지 및 초기화
    ========================================= */
    body, html { margin: 0 !important; padding: 0 !important; width: 100%; overflow-x: hidden !important; }
    #hd_login_msg { display: none !important; } /* 접근성 텍스트 숨김 */
    
    /* 기본 폰트 및 링크 초기화 */
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Pretendard', 'Malgun Gothic', sans-serif; color: #333; background: #fff; }
    li { list-style: none; }
    a { text-decoration: none; color: inherit; }
.daon_content_wrap { width:100%; max-width:1200px; margin:0 auto; padding: 0 20px; }
    

    /* =========================================
       [1] Header & Mobile Menu
    ========================================= */
    header {
        position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 80px !important;
        display: flex !important; align-items: center !important; z-index: 10000 !important;
        background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(10px); transition: 0.4s;
    }
    header.scrolled { background: rgba(255, 255, 255, 0.95) !important; border-bottom: 1px solid #eee; height: 70px !important; }
    header.scrolled .logo, header.scrolled .m-btn { color: #004ea2 !important; }
    header.scrolled .gnb > li > a { color: #333 !important; }

    .nav-container { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; max-width: 1300px !important; margin: 0 auto !important; padding: 0 20px !important; }
    .logo { font-size: 22px !important; font-weight: 900 !important; color: #fff !important; cursor: pointer; }
    .m-btn { display: none; font-size: 28px !important; color: #fff !important; cursor: pointer; }

    #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9998; opacity: 0; visibility: hidden; transition: 0.3s; }
    #overlay.active { opacity: 1; visibility: visible; }

    .gnb { display: flex !important; margin: 0 !important; padding: 0 !important; }
    .gnb > li { position: relative !important; display: block !important; }
    .gnb > li > a { display: block !important; padding: 0 20px !important; font-size: 17px !important; font-weight: 700 !important; color: #fff !important; line-height: 80px !important; transition: 0.3s; }
    
    @media (max-width: 1024px) {
        .m-btn { display: block !important; }
        .gnb { position: fixed !important; top: 0 !important; right: -70% !important; width: 70% !important; height: 100vh !important; background: #0052A4 !important; flex-direction: column !important; padding: 100px 0 !important; transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important; z-index: 9999 !important; overflow-y: auto !important; transform: translateX(0); }
        .gnb.open { transform: translateX(-100%); }
        .gnb > li > a { color: #fff !important; padding: 25px 25px !important; display: flex !important; justify-content: space-between !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; line-height: 1.5 !important; }
        .gnb > li > a::after { content: '▼' !important; font-size: 10px !important; transition: 0.3s !important; color: rgba(255,255,255,0.5) !important; }
        .gnb > li.active > a::after { transform: rotate(180deg) !important; color: #fff !important; }
        .lnb { max-height: 0 !important; overflow: hidden !important; background: rgba(0,0,0,0.15) !important; transition: max-height 0.4s ease-out !important; }
        .gnb > li.active .lnb { max-height: 500px !important; }
        .lnb a { color: #eee !important; padding: 15px 40px !important; display: block !important; font-size: 15px !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
    }

    @media (min-width: 1025px) {
        .lnb { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); background: #fff; width: 160px; padding: 10px 0; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transition: 0.3s; }
        .gnb li:hover .lnb { opacity: 1; visibility: visible; top: 60px; }
        .lnb a { color: #555 !important; font-size: 14px !important; display: block !important; text-align: center !important; padding: 8px 0 !important; line-height: 1.5 !important; }
    }

    /* =========================================
       [2] Visual Slider Area (최대폭 1920px & 배경 검정 설정)
    ========================================= */
    /* 바탕을 검정으로 깔고 가운데 정렬 */
    .visual-area { 
        position: relative; 
        width: 100vw !important; 
        height: 100vh; 
        background: #424242; /* 초과하는 영역은 검은색으로 표시 */
        overflow: hidden; 
        margin-left: calc(-50vw + 50%); 
    }
    @media (max-width: 1024px) { .visual-area { height: 60vh; } } 
    
    /* 슬라이드 컨테이너 최대 너비 1920px 제한 및 가운데 정렬 */
    .slider-container {
        position: relative;
        width: 100%;
        max-width: 2000px; /* 1920px 까지만 커지도록 제한 */
        height: 100%;
        margin: 0 auto; /* 좌우 가운데 정렬 */
        overflow: hidden;
    }

    .slide { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.5s ease; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; background-size: cover !important; background-position: center !important; overflow: hidden; }
    .slide.active { opacity: 1; z-index: 10; }
    .content { position: relative; z-index: 20; }
    .content h1 {font-size: 32px;font-weight: 700;line-height: 1.3;color: #ffffff !important; /* 글자색을 흰색으로 강력하게 고정 */
    text-shadow: 0 2px 20px rgba(0,0,0,0.8) !important; /* 배경이 밝아도 잘 보이도록 그림자 강화 */
    }
    @media (min-width: 1025px) { .content h1 { font-size: 60px; } }
    
    /* [핵심] 유튜브 배경 꽉 차게 만드는 CSS (1920px 한계 적용) */
    .video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: #000; }
    .video-background iframe { 
        position: absolute; top: 50%; left: 50%; 
        width: 100%; /* 부모(최대 1920px) 너비를 따라감 */
        height: 56.25vw; /* 16:9 비율 유지 (너비 기준) */
        min-height: 100vh; 
        min-width: 177.77vh; 
        max-width: 1920px; /* 비디오도 1920px 이상 커지지 않게 제한 */
        max-height: 1080px; /* 1920의 16:9 비율 높이 제한 */
        transform: translate(-50%, -50%); 
        pointer-events: none; border: none;
    }

    .dots { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 100; }
    .dot { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; margin: 15px 0; cursor: pointer; }
    .dot.active { background: #fff; transform: scale(1.4); }

    /* =========================================
       [3] Info Section (Schedule & Gallery)
    ========================================= */
    .info-section { background: #f8faff; padding: 80px 20px; width: 100vw !important; margin-left: calc(-50vw + 50%); }
    @media (min-width: 1025px) { .info-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } }
    .container_main { max-width: 1300px; margin: 0 auto; width: 100%; }

    .schedule-box { background: #fff; border-radius: 40px; padding: 40px 50px; box-shadow: 0 20px 60px rgba(0,0,0,0.05); display: flex; flex-wrap: wrap; margin-bottom: 40px; }
    @media (max-width: 1024px) { .schedule-box { padding: 25px; border-radius: 20px; } }
    .sch-left { flex: 1.2; min-width: 300px; }
    .sch-right { flex: 0.8; display: flex; align-items: flex-end; justify-content: flex-end; }
    .day-main { color: #1e3a8a; font-size: 50px; font-weight: 800; line-height: 0.8; margin-right: 30px; }
    .cal-item { width: 50px; height: 80px; border: 1px solid #f0f0f0; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .cal-item.active { background: #1e3a8a; color: #fff; }

    .gallery-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; }
    @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1025px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
    .gallery-item { cursor: pointer; }
    .gallery-thumb { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: #ddd; margin-bottom: 15px; }
    .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.4s; }
    .gallery-item:hover img { transform: scale(1.05); }
    .gallery-title { font-size: 17px; font-weight: 800; color: #111; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
    .gallery-desc { font-size: 14px; font-weight: 500; color: #666; line-height: 1.6; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .gallery-footer { display: flex; justify-content: space-between; font-size: 12px; color: #bbb; border-top: 1px solid #f0f0f0; padding-top: 10px; }