@font-face {
    font-family: 'YeogiOttaeJalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* =========================
   공통 스타일 및 초기화
========================= */
* {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Malgun Gothic', sans-serif;
    background: #f5f5f5; color: #222;
    line-height: 1.6; word-break: keep-all; 
}

/* =========================
   헤더 & 네비게이션
========================= */
header { background: #ffffff; padding: 25px 15px; text-align: center; }
.logo a { color: #000; text-decoration: none; font-size: 28px; font-weight: bold; font-family: 'YeogiOttaeJalnan', sans-serif; }

nav { background: transparent; padding: 10px 0; width: 100%; }
nav ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

nav a {
    display: block; padding: 12px 20px; color: #000;
    background: #f2c12e; border-radius: 12px;
    text-decoration: none; font-weight: 600; transition: 0.2s;
}

/* =========================
   [메인] Hero 섹션
========================= */
.hero {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('images/main-bg.jpg') no-repeat center center/cover;
    height: 70vh;
    min-height: 500px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; 
    text-align: center; color: #fff; width: 100%;
    position: relative;
}
.hero-inner { z-index: 2; width: 90%; }
.hero-inner h2 { 
    font-family: 'YeogiOttaeJalnan', sans-serif; 
    font-size: 45px; 
    margin-bottom: 15px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.btn { 
    display: inline-block; padding: 15px 35px; background: #f2c12e; 
    color: #000; text-decoration: none; font-weight: bold; 
    border-radius: 30px; margin-top: 25px; 
}

/* =========================
   [연혁] 가로 정렬 레이아웃 (수정완료)
========================= */
.container { width: 95%; max-width: 1100px; margin: 40px auto; overflow: hidden; }
.section-title { border-left: 6px solid #d4af37; padding-left: 15px; margin-bottom: 30px; font-family: 'YeogiOttaeJalnan', sans-serif; }

.history-list { list-style: none; padding: 0; width: 100%; }
.history-list li {
    background: #ffffff; margin-bottom: 20px; padding: 25px 35px; border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex; /* 가로 정렬 */
    align-items: flex-start; /* 상단 기준 정렬 */
    gap: 30px; /* 연도와 내용 사이 간격 */
}

.year { 
    font-weight: bold; font-size: 24px; color: #d4af37; 
    font-family: 'YeogiOttaeJalnan', sans-serif;
    min-width: 120px; /* 연도 너비 고정 */
    flex-shrink: 0; 
}
.content { 
    font-size: 17px; color: #333; font-weight: bold; 
    line-height: 1.7; word-break: keep-all; 
}

/* =========================
   [공연영상] 그리드
========================= */
.video-grid { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 20px; margin-top: 20px;
}
.video-item { 
    background: #fff; padding: 15px; border-radius: 20px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); text-align: center;
}
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* =========================
   [갤러리] 3열 유지
========================= */
.gallery { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; cursor: pointer; }

/* 모달 스타일 생략 (기존과 동일하므로 코드 간결화) */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 10000; justify-content: center; align-items: center; }
.modal-content { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
.modal-content img { max-width: 100%; max-height: 85vh; width: auto; height: auto; object-fit: contain; border-radius: 5px; }
.modal-content h3 { font-size: 24px; color: #fff; margin-top: 15px; font-family: 'YeogiOttaeJalnan', sans-serif; }
.modal-desc { color: #fff; font-weight: bold; text-align: center; margin-top: 10px; font-size: 17px; }
.close-btn { position: absolute; top: 20px; right: 20px; font-size: 45px; color: #fff; cursor: pointer; z-index: 11; }

/* =========================
   [공연프로그램] 카드
========================= */
.card-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 20px; }
.card { background: #fff; padding: 40px 20px; border-radius: 20px; text-align: center; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

footer { text-align: center; padding: 40px; color: #888; }

/* =========================
   📱 모바일 반응형 최종
========================= */
@media (max-width: 768px) {
    nav ul { flex-direction: column; width: 100%; gap: 12px; }
    nav a { width: 100%; text-align: center; padding: 15px; border-radius: 20px; }
    
    .hero { height: 60vh; min-height: 400px; }
    .hero-inner h2 { font-size: 32px; }

    /* 연역 모바일 정렬: 세로로 변경 */
    .history-list li {
        flex-direction: column;
        gap: 10px;
        padding: 20px;
    }
    .year { font-size: 20px; min-width: auto; }

    .video-grid, .card-grid { 
        grid-template-columns: 1fr !important; 
        max-width: 450px; margin: 0 auto; 
    }

    .gallery { grid-template-columns: repeat(3, 1fr) !important; gap: 5px; }
}
/* =========================
   갤러리 전용 네비게이션 (다른 페이지 영향 없음)
========================= */

/* 화살표 버튼 공통 */
.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    width: 50px;
    height: 80px;
    font-size: 30px;
    cursor: pointer;
    z-index: 10001; /* 모달 내용보다 위에 위치 */
    transition: background 0.3s, opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.gallery-nav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* 왼쪽/오른쪽 위치 설정 */
.gallery-nav-btn.prev-btn { left: 20px; }
.gallery-nav-btn.next-btn { right: 20px; }

/* 마지막/첫번째 사진일 때 숨김 처리용 클래스 */
.gallery-nav-hidden {
    display: none !important;
}

/* 모바일 대응: 화살표 크기 조절 및 위치 조정 */
@media (max-width: 768px) {
    .gallery-nav-btn {
        width: 40px;
        height: 60px;
        font-size: 24px;
        background: rgba(0, 0, 0, 0.2); /* 모바일은 가독성을 위해 더 투명하게 */
    }
    .gallery-nav-btn.prev-btn { left: 5px; }
    .gallery-nav-btn.next-btn { right: 5px; }
}
    /* ...자연스러운 슬라이드 기능... */

    .modal-img-container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        touch-action: pan-y; /* 세로 스크롤은 허용, 가로 스크롤은 JS가 제어 */
    }

    #modal-img {
        max-width: 100%;
        max-height: 80vh;
        object-fit: contain;
        /* 애니메이션을 제어하기 위해 초기 transition 설정 */
        transition: transform 0.3s ease-out; 
        will-change: transform;
    }

    /* 드래그 중에는 애니메이션(transition)을 꺼야 손가락을 즉각 따라옵니다 */
    .grabbing #modal-img {
        transition: none !important;
    }
/* =========================================
   모바일 메뉴 (햄버거 버튼) 스타일 추가
========================================= */
.mobile-menu-btn {
    display: none; /* PC 화면에서는 숨김 */
    font-size: 26px;
    font-weight: bold;
    text-align: left;
    padding: 10px 20px;
    cursor: pointer;
    color: #222;
    user-select: none;
    font-family: 'YeogiOttaeJalnan', sans-serif; /* ★ 상단 로고 글씨체 적용 */
}

/* 스마트폰 화면 (가로 768px 이하) 설정 */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block; /* 모바일에서만 햄버거 버튼 표시 */
    }
    
    nav ul {
        display: none; /* 모바일 기본 상태: 메뉴 목록 숨김 */
        flex-direction: column;
        width: 100%;
        background: #fff;
        margin: 0;
        padding: 0;
        border-top: 1px solid #eaeaea;
    }

    /* 버튼을 눌러 'active' 상태가 되면 메뉴 표시 */
    nav ul.active {
        display: flex;
    }

    nav ul li {
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
    }

    nav ul li a {
        display: block;
        padding: 15px 0;
        text-align: center;
    }
}