@import url("/fonts/s-core-dream.css");

/* ========================================================
           SUB PAGE HERO BANNER
        ======================================================== */
       .sub-hero {
    position: relative;
    width: 100%;
    height: 320px;
    
    /* --- 수정된 배경 스타일 --- */
    /* 배경 이미지 경로 (실제 이미지 경로로 변경 필요) */
    /* 이미지가 영역을 꽉 채우도록 설정 */
    /* ----------------------- */
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

/* 배경 이미지가 밝을 경우를 대비해 텍스트에 강한 그림자/테두리를 줍니다. */
.sub-hero-content h1 {
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); 
    font-weight: bold;
}
.sub-hero-content {
    display: inline-block; /* 글자 길이만큼만 박스가 생기게 하려면 추가 (전체 너비로 하려면 생략 가능) */
    background: rgba(51, 87, 167, 0.5); /* 검은색 반투명 (0.5는 투명도, 숫자로 조절) */
    padding: 20px 30px; /* 글자와 박스 테두리 사이의 여백 */
    border-radius: 8px; /* 모서리를 둥글게 (선택사항) */
}
.sub-hero-content p {
    text-shadow: 0 1px 5px rgba(0,0,0,0.8);
}

    /* 서브 히어로 영역 기본 설정 및 오버플로우 숨김 (이미지가 커질 때 밖으로 튀어나가지 않도록) */
    .sub-hero {
        position: relative;
        overflow: hidden;
        /* 배경 이미지 애니메이션 정의 (6초 동안 서서히 확대) */
        animation: heroBgZoom 6s ease-out forwards;
    }

    /* 배경 이미지 서서히 커지는 애니메이션 */
    @keyframes heroBgZoom {
        0% {
            background-size: 100% auto;
        }
        100% {
            background-size: 110% auto; /* 살짝 확대됨 (비율에 맞춰 조절 가능) */
        }
    }

    /* 텍스트 영역 애니메이션 */
    .sub-hero-content {
        position: relative;
        z-index: 2;
        opacity: 0;
        transform: translateY(30px); /* 아래쪽에서 시작 */
        animation: contentFadeUp 1s ease-out 0.3s forwards; /* 0.3초 뒤에 1초동안 부드럽게 실행 */
    }

    /* 텍스트가 아래에서 부드럽게 올라오며 나타나는 애니메이션 */
    @keyframes contentFadeUp {
        0% {
            opacity: 0;
            transform: translateY(30px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
        /* ========================================================
           [핵심] 본문 상단 가로형 서브 메뉴 내비게이션 (브레드크럼 & 탭 바)
        ======================================================== */
        .sub-nav-section {
            background: #f8f9fa; border-bottom: 1px solid #e5e5e5; position: sticky; top: 75px; z-index: 900;
        }
        .sub-nav-container {
            max-width: 1400px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: center;
        }
        .breadcrumb {
            display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: #666; padding: 15px 0;
        }
        .breadcrumb span { color: #004080; font-weight: 500; }

        /* 본문 상단 멋진 가로형 탭 내비게이션 */
        .sub-tab-menu {
            display: flex; gap: 30px; height: 100%;
        }
        .sub-tab-menu a {
            font-size: 0.95rem; font-weight: 500; color: #555; padding: 18px 0; position: relative; transition: 0.3s;
        }
        .sub-tab-menu a:hover, .sub-tab-menu a.active {
            color: #004080; font-weight: 700;
        }
        .sub-tab-menu a.active::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #004080;
        }
		
@media (max-width: 768px) {
    .sub-nav-container {
        display: flex;
        flex-direction: column;
    }

    /* 브레드크럼 모바일 가독성 개선 */
    .breadcrumb {
        font-size: 0.85rem;
        color: #666;
        margin-bottom: 8px;
        padding: 0 4px;
    }
	  .sub-main-content {
            margin: 0px auto 0px auto !important; padding: 0 10px !important;
        }

    /* 키워드(칩) 형태 + 자동 줄바꿈(wrap) 적용 */
    .sub-tab-menu {
        display: flex;
        flex-wrap: wrap; /* 공간이 부족하면 아래 줄로 떨어짐 */
        gap: 6px;        /* 칩과 칩 사이의 간격 (가로/세로 모두 적용) */
        padding: 4px 0 8px 0;
    }

    .sub-tab-menu a {
        font-size: 0.9rem;
        font-weight: 500;
        color: #555;
        background-color: #f1f3f5; /* 연한 회색 배경 */
        padding: 6px 12px;         /* 칩 내부 여백 */
        border-radius: 20px;       /* 둥근 알약 형태 */
        border: 1px solid #e2e6ea; /* 테두리 */
        transition: all 0.2s ease;
    }

    .sub-tab-menu a:hover, 
    .sub-tab-menu a.active {
        color: #fff;               /* 활성화 시 글자색 흰색 */
        background-color: #004080; /* 브랜드 포인트 컬러 */
        font-weight: 600;
        border-color: #004080;
    }

    /* 밑줄 효과 제거 */
    .sub-tab-menu a.active::after {
        display: none;
    }
}

        /* ========================================================
           SUB PAGE MAIN CONTENT AREA
        ======================================================== */
        .sub-main-content {
            max-width: 1400px; margin: 60px auto 100px auto; padding: 0 40px;
        }
        .content-header-box {
            display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;
        }
        .content-header-box h2 { font-size: 1.8rem; font-weight: 700; color: #111; letter-spacing: -0.5px; }
        
        /* 필터 및 검색 바 */
        .filter-bar {
            display: flex; gap: 15px; margin-bottom: 40px;
        }
        .filter-select {
            padding: 10px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem; background: #fff; outline: none; cursor: pointer;
        }
        .search-box {
            display: flex; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; background: #fff;
        }
        .search-box input {
            border: none; padding: 10px 15px; font-size: 0.9rem; outline: none; width: 250px;
        }
        .search-box button {
            background: #004080; color: #fff; border: none; padding: 0 20px; font-weight: 600; cursor: pointer;
        }

        /* 공연 목록 그리드 */
        .perf-grid-sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .perf-card { background: #fff; border: 1px solid #eaeaea; border-radius: 6px; overflow: hidden; transition: 0.3s; }
        .perf-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
        .perf-thumb { width: 100%; height: 350px; position: relative; background: #eee; }
        .perf-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .perf-badge { position: absolute; top: 15px; left: 15px; background: #004080; color: #fff; font-size: 0.75rem; padding: 4px 10px; border-radius: 2px; font-weight: 500; }
        .perf-info { padding: 25px; }
        .perf-info .date { font-size: 0.85rem; color: #004080; font-weight: 600; margin-bottom: 8px; }
        .perf-info .title { font-size: 1.15rem; font-weight: 700; color: #111; margin-bottom: 10px; line-height: 1.4; }
        .perf-info .loc { font-size: 0.9rem; color: #666; margin-bottom: 20px; }
        .ticket-btn-area { display: flex; gap: 10px; }
        .btn-detail { flex: 1; padding: 10px; text-align: center; border: 1px solid #ccc; font-size: 0.85rem; font-weight: 500; color: #333; border-radius: 4px; transition: 0.2s; }
        .btn-book { flex: 1; padding: 10px; text-align: center; background: #004080; color: #fff; font-size: 0.85rem; font-weight: 600; border-radius: 4px; transition: 0.2s; }
        .btn-detail:hover { background: #f1f1f1; }
        .btn-book:hover { background: #003366; }
		
		.premium-page-header h2,
		.view-title,
		.btn-premium,
		.btn-premium-blue,
		.premium-list-table th,
		.premium-list-table td,
		.subject-link,
		.comment-header,
		.attach-label,
		.badge-blue,
		.btn-dark-gray,
		.search-box-wrap select, /* 검색 카테고리 명시 */
		.search-box-wrap input   /* 검색어 입력창 명시 */
		{
			font-family: "s-core-dream-bold" !important, sans-serif ;
			text-rendering: optimizeLegibility;
			-webkit-font-smoothing: antialiased; /* 맥/iOS에서 글자를 더 부드럽게 다듬어주는 속성 */
			-moz-osx-font-smoothing: grayscale;
		}