:root {
    --primary-color: #000000;
    --dark-bg: #111111;
    --text-main: #333;
    --text-white: #fff;
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Noto Sans KR', sans-serif; line-height: 1.6; color: var(--text-main); }
.inner-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }

/* Header Design */
.header { position: fixed; top: 0; width: 100%; z-index: 1000; padding: 30px 0; transition: var(--transition); }
.header.scrolled { background: rgba(255,255,255,0.95); padding: 15px 0; box-shadow: 0 4px 20px rgba(0,0,0,0.08); backdrop-filter: blur(10px); }

.logo a { font-family: 'Montserrat'; font-weight: 800; font-size: 1.8rem; color: var(--text-white); }
.header.scrolled .logo a { color: #000; }
.logo span { color: var(--primary-color); }

.gnb_ul { display: flex; gap: 40px; }
.gnb_a { color: var(--text-white); font-weight: 500; }
.header.scrolled .gnb_a { color: #444; }

/* Hero Section */
.hero_section { 
    height: 100vh; 
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/main_bg.jpg') center/cover;
    display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-white);
}
.hero_content h2 { font-family: 'Montserrat'; font-size: 5rem; line-height: 1.1; margin: 20px 0; }
.badge { background: var(--primary-color); padding: 5px 15px; border-radius: 50px; font-size: 0.9rem; }

/*  */

/* Reveal Animation */
.reveal { opacity: 0; transform: translateY(50px); transition: 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Latest Skin Custom */
.latest_grid { padding: 120px 0; }
.sec_title { text-align: center; margin-bottom: 60px; }
.sec_title h3 { font-size: 2.5rem; font-family: 'Montserrat'; }
.sec_title h3 span { color: var(--primary-color); }

/* HEAD.PHP - CSS */
    /* 1. GNB 전체 영역 투명화 */
    #gnb {
        background-color: rgba(255, 255, 255, 0.7) !important; /* 배경만 70% 투명 */
        backdrop-filter: blur(8px) !important; /* 뒤 배경 흐림 효과 */
        -webkit-backdrop-filter: blur(8px) !important;
        position: relative;
        z-index: 1000 !important;
    }

    /* 2. 1차 메뉴 리스트 배경 제거 */
    .gnb_1dul, .gnb_1dli {
        background: transparent !important;
    }

    /* 3. 서브 메뉴(2차) 하단으로 내려오는 박스 투명화 */
    

    /* 4. 글자색 강제 고정 (투명 배경에서 잘 보이게) */
    .gnb_1da, .gnb_2dul li a {
        color: #222 !important;
        /*text-shadow: 0 0 1px rgba(255,255,255,0.5);  글자 가독성 보조 */
    }

    /* 기본 상태 */
    #tnb {
        border-bottom:0px solid gray !important;
        transition: all 0.3s ease-in-out;
        overflow: hidden;
        height: 40px; /* 실제 tnb의 높이에 맞게 조절하세요 (예: 40px) */
        opacity: 1;
    }

    /* 스크롤 시 사라질 상태 */
    .tnb-hide {
        height: 0 !important;
        opacity: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        pointer-events: none; /* 클릭 방지 */
    }

    
    /* 1. 헤더 전체 영역 투명화 */
        #hd {
            position: absolute; /* 배경 이미지 위에 겹치게 배치 */
            top: 0;
            left: 0;
            width: 100%;
            background: transparent !important;
            border: none !important;
            z-index: 1000;
            box-shadow: none !important;
        }

        /* 2. 헤더 내부 wrapper 투명화 및 여백 조절 */
        #hd_wrapper, .hd_sch_wr, #logo {
            background: transparent !important;
            border: none !important;
        }

        /* 3. 로고와 메뉴 글자색 (배경이 어두울 때 대비) */
        #logo a {
            color: #fff !important;
            font-size: 24px;
            font-weight: bold;
        }   
        .gnb {background: transparent !important;}
        .gnb_1dul{
             background: transparent !important;
        }
        #gnb .gnb_1da {
            color: #fff !important; /* 글자색 흰색 강제 */
           /*  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); 가독성을 위한 미세한 그림자 */
        }

        /* 4. 서브메뉴(2차 메뉴) 스타일 - 가독성을 위해 반투명 블랙 유지 */
        #gnb .gnb_2dul {
            background: rgba(0, 0, 0, 0.7) !important;
            backdrop-filter: blur(8px); /* 뒤 배경 흐림 효과 */
            border: none !important;
        }

        #gnb .gnb_2dul li a {
            color: #fff !important;
        }

        /* --------------------------------------------------
        [추가] 스크롤 시 헤더에 배경색 넣기 (선택 사항)
        만약 아래로 내릴 때 메뉴가 안 보인다면 이 기능을 사용하세요.
        -------------------------------------------------- */
        .header-fixed {
            position: fixed !important;
            background: rgba(255, 255, 255, 0.9) !important; /* 스크롤 시 흰색 반투명 */
            box-shadow: 0 1px 5px rgba(0,0,0,0.1) !important;
        }

        .header-fixed #gnb .gnb_1da, 
        .header-fixed #logo a {
            color: #333 !important; /* 스크롤 시 글자색 검정으로 변경 */
        }

        /* 1. 헤더 및 GNB 전체 배경 흐림 효과 제거 */
        #hd, #hd_wrapper, #gnb {
            background: transparent !important;
            backdrop-filter: none !important; /* 흐림 효과 강제 제거 */
            -webkit-backdrop-filter: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* 2. 서브메뉴 (2차 메뉴) 배경 설정 */
        /* 흐림 효과 없이 그냥 깨끗한 반투명 색상만 적용 */
        

        /* 3. 1차 메뉴 호버 시 효과 */
        .gnb_1dli:hover .gnb_2dul {
            display: block;
        }

        /* 4. 스크롤 시 발생하는 흐림 효과도 제거 (스크립트 사용 시) */
        .header-fixed {
            background: rgba(255, 255, 255, 1) !important; /* 완전 불투명 흰색으로 변경 */
            backdrop-filter: none !important;
        }

        /* 스크롤 내렸을시.. */
        /* 기본 상태: 투명 헤더 */
        #hd {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background: transparent !important;
            transition: background 0.3s ease, box-shadow 0.3s ease; /* 부드러운 전환 효과 */
            z-index: 1000;
        }

        /* 1차 메뉴 기본 글자색 (흰색) */
        #hd #gnb .gnb_1da, #hd #logo a {
            color: #fff !important;
            transition: color 0.3s ease;
        }

        /* --------------------------------------------------
        스크롤 시 적용될 클래스 (흰색 배경으로 변경)
        -------------------------------------------------- */
        #hd.header-fixed {
            position: fixed !important; /* 상단 고정 */
            background: #fff !important; /* 흰색 배경 */
            box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; /* 하단 그림자 */
            border-bottom: 1px solid #eee !important;
        }

        /* 스크롤 시 글자색을 검정색으로 변경 */
        #hd.header-fixed #gnb .gnb_1da, 
        #hd.header-fixed #logo a {
            color: #333 !important;
        }

        
        /* 스크롤 시 서브메뉴(2차 메뉴) 배경도 조정 가능 */
        #hd.header-fixed .gnb_2dul {
            background: #ffffff !important;
            border: 1px solid #eee !important;
        }

        #hd.header-fixed .gnb_2dul li a {
            color: #333 !important;
        }

        /* 2차메뉴 마우스 hover 시.. */
        #hd.header-fixed .gnb_2dul li a:hover {
            color: #ffffff !important;
        }

        /* 모바일 메뉴css */
       /* 모바일(768px 이하)에서 PC 스타일 강제 이식 */
@media (max-width: 768px) {
    /* 보통 .menu-trigger, .hamburger, .btn-menu 등의 클래스명을 사용합니다 */
.line {
    background-color: #a7a7a7 !important; /* 흰색으로 강제 적용 */
}
}


/* 기본 초기화 (테마에 이미 있다면 제외 가능) */
body, h2, p { margin: 0; padding: 0; font-family: 'Pretendard', sans-serif; }

/* 메인 비주얼 섹션 */
#main_visual {
    width: 100%;
    height: 100vh; /* 화면 높이 전체 사용 (VH 단위) */
    position: relative;
    overflow: hidden;
    background-color: #000; /* 이미지 로딩 전 배경색 */
}

.mySwiper {
    width: 100%;
    height: 100%;
}

.slide-item {
    width: 100%;
    height: 100%;
    background-size: cover; /* 이미지를 비율 깨짐 없이 꽉 채움 */
    background-position: center; /* 이미지 중앙 배치 */
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 이미지 위 어두운 오버레이 (글자 가독성 확보) */
.slide-item::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.45); /* 어둡기 조절 */
    z-index: 1;
}

/* 텍스트 콘텐츠 영역 */
.slide-content {
    position: relative;
    z-index: 10; /* 오버레이보다 위에 배치 */
    text-align: center;
    color: #fff;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 💥 움직이면서 나타나는 핵심 CSS --- */

/* 1. 초기 상태 설정 (평소에는 숨김) */
.slide-content h2,
.slide-content p,
.slide-content a {
    opacity: 0; /* 투명하게 */
    transform: translateY(40px); /* 아래로 40px 내려가 있음 */
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 부드럽고 찰진 움직임 */
}

/* 2. 애니메이션 실행 상태 (.ani-done 클래스가 붙으면 실행) */
.swiper-slide-active .slide-content h2,
.swiper-slide-active .slide-content p,
.swiper-slide-active .slide-content a {
    opacity: 1; /* 나타남 */
    transform: translateY(0); /* 원래 위치로 복귀 */
}

/* 3. 각 요소별 시간차(Delay) 설정 (퀄리티 업) */
.swiper-slide-active .slide-content h2 { transition-delay: 0.1s; } /* 제목 먼저 */
.swiper-slide-active .slide-content p { transition-delay: 0.3s; } /* 그 다음 설명 */
.swiper-slide-active .slide-content a { transition-delay: 0.5s; } /* 마지막 버튼 */


/* --- 기본 텍스트 스타일 (커스텀 가능) --- */
.slide-content h2 {
    font-size: clamp(2.2rem, 5vw, 4.2rem); /* 반응형 폰트 크기 */
    font-weight: 900;
    margin-bottom: 25px;
    letter-spacing: -1.5px;
    line-height: 1.2;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

.slide-content p {
    font-size: clamp(1rem, 2vw, 1.4rem);
    margin-bottom: 40px;
    font-weight: 300;
    opacity: 0.85;
    line-height: 1.6;
}

.btn-link {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid rgba(255,255,255,0.8);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-link:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* --- 좌우 화살표 버튼 커스텀 (퀄리티 업) --- */
.swiper-button-next, .swiper-button-prev {
    color: #fff !important;
    opacity: 0.3; /* 평소엔 반투명 */
    transition: 0.3s;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1); /* 배경 원형 효과 */
    border-radius: 50%;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 32px !important; /* 화살표 크기 */
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    opacity: 1; /* 호버 시 진하게 */
    background: rgba(255,255,255,0.2);
}
.swiper-button-prev { left: 40px; }
.swiper-button-next { right: 40px; }

/* --- 하단 점 버튼(Pagination) 커스텀 (퀄리티 업) --- */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #fff !important;
    opacity: 0.4;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.swiper-pagination-bullet-active {
    opacity: 1;
    width: 35px; /* 활성 상태 시 길쭉하게 늘어남 */
    border-radius: 10px;
    background: #fff !important;
}
.swiper-pagination { bottom: 40px !important; }

/* --- 모바일 최적화 (퀄리티 핵심) --- */
@media (max-width: 768px) {
    #main_visual { height: 75vh; } /* 모바일은 화면의 75% 높이만 사용 (부담 줄임) */
    .slide-content h2 { font-size: 2rem; margin-bottom: 15px; }
    .slide-content p { font-size: 0.95rem; margin-bottom: 25px; }
    .btn-link { padding: 10px 30px; font-size: 0.9rem; }
    .swiper-button-next, .swiper-button-prev { display: none; } /* 모바일은 화살표 숨김 */
    .swiper-pagination-bullet { width: 8px; height: 8px; }
    .swiper-pagination-bullet-active { width: 25px; }
    .swiper-pagination { bottom: 25px !important; }
}

/* 유튜브슬라이드 css */
#main_visual {
    width: 100%;
    height: 100vh; /* 화면 꽉 차게 */
    position: relative;
    overflow: hidden;
}

.mySwiper {
    width: 100%;
    height: 100%;
}

/* --- 유튜브 iframe 최적화 --- */
.video-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none; /* 영상 위 클릭 차단 (슬라이드 원활하게) */
}

.video-wrapper iframe {
    width: 100vw;
    height: 56.25vw; /* 16:9 비율 유지 */
    min-height: 100vh;
    min-width: 177.77vh; /* 비율 유지하며 꽉 채움 */
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

/* LOGIN/JOIN BORDER STYLE*/
#hd.header-fixed .hd_icons a, #hd.header-fixed .hd_icons button, #hd.header-fixed .hd_icons i{
    border:1px solid black;
}

/* INDEX.PHP - CSS */
    /* 기본 설정 */
:root {
    --primary: #864119;
    --dark: #1a1a1a;
    --white: #ffffff;
    --gap: 4vw; /* 화면 크기에 비례하는 간격 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Pretendard', sans-serif; color: var(--dark); line-height: 1.5; overflow-x: hidden; }

/* 공통: 좌우 여백을 최소화하고 화면을 넓게 사용 */
.full-container {
    width: 100%;
    padding: 0 var(--gap);
}

/* --- 1. 대화면 히어로 섹션 (화면 꽉 채움) --- */
.hero-full {
    width: 100%;
    height: 100vh; /* 화면 높이 꽉 채움 */
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-video-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; /* 배경 꽉 채우기 */
    z-index: -1;
}

.hero-content {
    z-index: 2;
    color: var(--white);
}

.hero-content h1 {
    font-size: clamp(3rem, 10vw, 8rem); /* 화면 크기에 따라 가변적인 초거대 폰트 */
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    margin-bottom: 2rem;
}

/* --- 2. 와이드 이미지 & 텍스트 섹션 (잡지 스타일) --- */
.wide-intro {
    padding: 150px 0;
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.wide-intro .image-area {
    flex: 1.2;
    height: 80vh;
}

.wide-intro .image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 100px 100px 0; /* 시각적 포인트 */
}

.wide-intro .text-area {
    flex: 1;
    padding-right: var(--gap);
}

.text-area h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: 2rem;
    word-break: keep-all;
}

/* --- 3. 갤러리 그리드 (여백 없는 꽉 찬 레이아웃) --- */
.full-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}

.grid-item {
    position: relative;
    height: 60vh;
    overflow: hidden;
    border-radius:10%;
    margin-left:10px;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s transform;
}

.grid-item:hover img {
    transform: scale(1.1);
}

.grid-overlay {
    position: absolute;
    bottom: 0; left: 0; padding: 40px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    width: 100%;
}

/* --- 반응형 (모바일) --- */
@media (max-width: 992px) {
    .wide-intro { flex-direction: column; padding: 80px 0; }
    .wide-intro .image-area { width: 100%; height: 50vh; }
    .wide-intro .image-area img { border-radius: 0; }
    .full-grid { grid-template-columns: 1fr; } /* 모바일은 1열 */
    .hero-full { height: 80vh; }
}

/* 이벤트메뉴 */
/* 타이틀 섹션 스타일 */
.event-menu-section {
    padding-top: 100px; /* 위 섹션과의 간격 */
    background-color: #fff;
}

.section-header-wide {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 20px;
}

.main-title-large {
    font-size: clamp(2.5rem, 3vw, 4.5rem); /* 반응형 거대 폰트 */
    font-weight: 800;
    color: var(--dark);
    margin: 10px 0 20px;
    letter-spacing: -0.02em;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--gray);
    max-width: 600px;
    margin: 0 auto;
    word-break: keep-all;
    line-height: 1.6;
}

/* 기존 full-grid와의 연결을 위해 마진 제거 */
.full-grid {
    margin-top: 20px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .event-menu-section { padding-top: 60px; }
    .main-title-large { font-size: 2.2rem; }
    .section-desc { font-size: 0.95rem; }
    .grid-item {margin-top:20px; margin-left:0px;}
}

/* 슬라이드 영역 */

.multi-slider-section {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.section-header-center { text-align: center; margin-bottom: 50px; }

/* 슬라이더 뷰포트 */
.multi-slider-view {
    width: 100%;
    overflow: visible; /* 양옆이 살짝 보이게 하려면 visible, 아니면 hidden */
}

.multi-slider-track {
    display: flex;
    gap: 24px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 카드 스타일 (PC 5개 기준) */
.card-item {
    flex: 0 0 calc(20% - 20px); /* 화면 폭에 맞춰 5개 노출 */
    min-width: 280px;
    border-radius: 20px;
    background: #fdfdfd;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: 0.3s;
}

.card-item:hover { transform: translateY(-10px); }
.card-item img { width: 100%; height: 350px; object-fit: cover; }
.card-info { padding: 25px; text-align: center; }
.card-info h3 { font-size: 1.2rem; margin-bottom: 8px; }
.card-info p { color: var(--primary); font-weight: 700; }

/* 하단 버튼 배치 핵심 */
.slider-controls-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}

.m-btn {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s;
    display: flex; align-items: center; justify-content: center;
}

.m-btn:hover {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
}

.counter {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

/* 반응형 개수 조절 */
@media (max-width: 1400px) { .card-item { flex: 0 0 calc(25% - 18px); } } /* 4개 */
@media (max-width: 1024px) { .card-item { flex: 0 0 calc(33.33% - 16px); } } /* 3개 */
@media (max-width: 768px) { 
    .card-item { flex: 0 0 calc(50% - 12px); } /* 2개 */
    .slider-controls-bottom { gap: 15px; }
}

/* 리뷰 영역 */

.review-section {
    padding: 0px 0;
    background-color: #fcfcfc;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.review-card {
    background: #fff;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
    border: 1px solid #f0f0f0;
}

/* 마우스 올렸을 때 효과 */
.review-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

/* 강조된 리뷰 (가운데 등) */
.review-card.highlight {
    border: 1px solid var(--primary);
}

.review-user {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.user-thumb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info h4 {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.stars {
    color: #f1c40f; /* 별점 노란색 */
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.review-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
    min-height: 100px; /* 카드 높이 균일화 */
}

.review-date {
    font-size: 0.85rem;
    color: #aaa;
}

.review-footer {
    text-align: center;
    margin-top: 60px;
}

.btn-more-review {
    display: inline-block;
    padding: 15px 40px;
    border: 1px solid #ddd;
    border-radius: 50px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-more-review:hover {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
}

/* 반응형 */
@media (max-width: 1024px) {
    .review-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .review-grid { grid-template-columns: 1fr; }
    .review-section { padding: 80px 0; }
    .review-card { padding: 30px; }
}