/* Reset & Common */
* { box-sizing: border-box; margin: 0; padding: 0; }
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
body { font-family: 'Paperozi', sans-serif; font-size: 16px; color: #333; }
ul, li { list-style: none; }
a { text-decoration: none; color: inherit; }
button {border: none;background: transparent;cursor: pointer;font-family: 'Paperozi', sans-serif;}
.bold { font-weight: 700; }

/* Header Layout */
.header {
    width: 100%;
    background-color: #006bb9; /* 메인 컬러 */
    position: relative;
    z-index: 1000;
}
.inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* 1. Header Top */
.header-top {
    padding: 25px 0;
}
.header-top .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* 로고 */
.logo a { display: block; }
.logo img {height: 69px;/* filter: invert(1); */filter: brightness(26.5);} /* 로고 높이 조정 */
/* 로고 */
.logo a { display: block; }

.logo img {
  height: 69px;
  filter: brightness(26.5);
  
  /* 애니메이션 */
  animation: logo-anim 4s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes logo-anim {
  0%, 100% {
    transform: translateY(0);
    filter: brightness(26.5);
  }
  50% {
    transform: translateY(-5px);
    filter: brightness(30) drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
  }
}

/* 접근성 */
@media (prefers-reduced-motion: reduce) {
  .logo img { animation: none; }
}

/* 검색창 */
.search-wrap {
    flex: 1;
    max-width: 500px;
    margin: 0 40px;
    text-align: center;
}
.search-box {
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.search-box input {
    width: 100%;
    height: 45px;
    border: none;
    padding: 0 50px 0 20px;
    font-size: 16px;
    outline: none;
    font-family: 'Paperozi';
}
.search-box button {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    font-size: 20px;
    color: #0b0d68;
}
.keywords {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 5px;
}
.keywords a {
    font-size: 13px;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 15px;
    padding: 2px 10px;
    transition: 0.2s;
    font-family: 'Paperozi';
}
.keywords a:hover {
    background: #fff;
    color: #0b0d68;
}

/* 상단 우측 메뉴 */
.top-menu {
    color: #fff;
    font-size: 14px;
    font-family: 'Paperozi';
}
.top-menu .sep { margin: 0 5px; opacity: 0.5; }

/* 2. Header Nav (Bottom) */
.header-nav {
    border-top: 1px solid rgba(255,255,255,0.1);
}
.header-nav .inner {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 햄버거 버튼 */
.btn-allmenu {
    font-size: 24px;
    color: #fff;
    width: 40px;
    height: 40px;
}

/* GNB */
.gnb ul {
    display: flex;
    gap: 40px;
}
.gnb a {
    color: #fff;
    font-size: 18px;
    display: block;
    height: 60px;
    line-height: 60px;
    font-family: 'Paperozi';
}

/* 우측 버튼 */
.nav-right {
    display: flex;
    gap: 10px;
}
.nav-right a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 15px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Paperozi';
}
.btn-report {
    border: 1px solid #fff;
    color: #fff;
}
.nav-right i {
    margin-right: 4px;
}
.btn-regist {
    background: #fff;
    color: #0b0d68;
}

/* ★★★ 3. 전체 메뉴 레이어 (Mega Menu) ★★★ */
.all-menu-layer {
    display: none; /* JS로 제어 */
    position: absolute;
    top: 100%; /* 헤더 바로 아래 */
    left: 0;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 10px 10px rgba(0,0,0,0.05);
    padding: 40px 0;
    z-index: 999;
}
.all-menu-layer.active {
    display: block;
}

.menu-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.col {
    flex: 1; /* 동일 너비 분배 */
    min-width: 160px;
}
.col-tit {
    font-size: 17px;
    font-weight: 700;
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    text-align: center;
    font-family: 'Paperozi';
}
/* 컬럼 타이틀 배경색 (이미지 기반) */
.col-tit.blue1 { background: #eef6fc; color: #0b0d68; }
.col-tit.blue2 { background: #eef6fc; color: #0b0d68; }
.col-tit.blue3 { background: #eef6fc; color: #0b0d68; }
.col-tit.blue4 { background: #eef6fc; color: #0b0d68; }
.col-tit.gray { background: #f7f7f7; color: #333; }

.depth2 > li {
    margin-bottom: 12px;
}
.depth2 > li > a {
    font-size: 15px;
    color: #444;
    font-weight: 500;
    display: block;
    font-family: 'Paperozi';
}
.depth2 > li > a:hover {
    color: #0b0d68;
    text-decoration: underline;
}

/* 3차 메뉴 (작은 글씨) */
.depth3 {
    margin-top: 5px;
    padding-left: 10px;
}
.depth3 li a {
    font-size: 13px;
    color: #777;
    display: block;
    margin-bottom: 3px;
}
.depth3 li a:before {
    content: '- ';
}

/* 닫기 버튼 (레이어 내부 우측 상단 등 위치 잡기) */
.btn-close-menu {
    display: none; /* PC에서는 토글 버튼으로 제어하므로 숨김 */
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: #333;
}

/* =========================================
   반응형 (Tablet & Mobile)
   ========================================= */

/* 태블릿 (~1024px) */
@media (max-width: 1024px) {
    .gnb { display: none; } /* GNB 숨김 */
    .nav-right { display: none; } /* 우측 버튼 숨김 */
    
    .header-nav .inner {
        justify-content: flex-start; /* 햄버거 버튼만 왼쪽 정렬 */
    }
    
    .search-wrap {
        margin: 0 20px;
    }
}

/* 모바일 (~768px) */
@media (max-width: 768px) {
    .header-top .inner {
        flex-direction: column;
        gap: 2px;
    }
    
    .logo { margin-bottom: 5px; }
    
    .search-wrap {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    
    .top-menu { display: none; } /* 모바일에서 상단 메뉴 숨김 */
    
    /* 전체 메뉴 레이어 모바일 스타일 */
    .all-menu-layer {
        position: fixed; /* 전체화면 덮기 */
        top: 0;
        left: 0;
        height: 100%;
        overflow-y: auto;
        padding: 60px 0 40px; /* 상단 닫기 버튼 공간 확보 */
    }
    .menu-cols {
        flex-direction: column;
        gap: 0;
    }
    .col {
        width: 100%;
        margin-bottom: 30px;
    }
    .col-tit {
        text-align: left;
        margin-bottom: 10px;
    }
    
    .btn-close-menu {
        display: block; /* 모바일에서는 닫기 버튼 보임 */
        top: 15px;
        right: 15px;
    }
}
/* Main Container */
.main-content {
    padding: 30px 0;
    width: 100%;
}
.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex; /* 좌우 배치 */
    gap: 20px;
}

/* 1. 좌측 메인 비주얼 (슬라이드) */
.main-visual {
    flex: 1.2; /* 약 70% 비율 */
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /* 슬라이드 하단 컨트롤러 공간 확보를 위해 padding-bottom 줄 수 있음 */
}

/* Swiper 스타일 재정의 */
.swiper {
    width: 100%;
    height: 100%;
    border-radius: 20px; /* 둥근 모서리 */
}
.swiper-slide {
    position: relative;
    overflow: hidden;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 꽉 차게 */
    display: block;
}

/* 하단 컨트롤러 영역 (이미지 하단 우측에 겹쳐서 배치된 디자인) */
.swiper-controls {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #fff;
    border-top-left-radius: 20px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    z-index: 10;
    gap: 15px;
}

/* 프로그레스 바 (파란색) */
.swiper-pagination-custom {
    width: 100px;
    height: 4px;
    background: #eee;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.swiper-pagination-progressbar-fill {
    background: #0b0d68 !important; /* 진행바 색상 */
    border-radius: 2px;
}

/* 숫자 및 버튼 */
.control-btns {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: #333;
}
.fraction {
    font-weight: 500;
    letter-spacing: 1px;
    display: flex;
}
.control-btns button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f4f4f4;
    color: #555;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
.control-btns button.next-btn {
    background: #0b0d68; /* 활성화된 버튼 색상 (예시) */
    color: #fff;
}
.control-btns button:hover {
    background: #0b0d68;
    color: #fff;
}


/* 2. 우측 퀵 메뉴 그리드 */
.quick-menu {
    flex: 1; /* 약 30% 비율 */
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 그리드 */
    gap: 10px;
}

.quick-item {
    background: #f8f9fb; /* 연한 회색 배경 */
    border-radius: 12px;
    padding: 20px 5px;
    text-align: center;
    position: relative;
    transition: 0.3s;
    height: 110px; /* 높이 고정 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.quick-item:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* 뱃지 (특화서비스) */
.badge {
    position: absolute;
    top: 0;
    left: 0;
    background: #4a57e6; /* 보라빛 파랑 */
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-top-left-radius: 12px;
    border-bottom-right-radius: 8px;
    font-weight: bold;
}

/* 아이콘 박스 */
.icon-box {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
}
.icon-box svg {
    width: 100%;
    height: 100%;
    stroke: #0b0d68; /* 아이콘 선 색상 */
}

/* 텍스트 */
.text {
    font-size: 13px;
    line-height: 1.3;
    color: #333;
    font-weight: 500;
    word-break: keep-all; /* 단어 단위 줄바꿈 */
}

/* =========================================
   반응형 (Tablet & Mobile)
   ========================================= */

/* 1024px 이하 (태블릿) */
@media (max-width: 1024px) {
    .container {
        flex-direction: column; /* 세로 배치로 변경 */
    }
    .main-visual, .quick-menu {
        flex: auto;
        width: 100%;
    }
    
    /* 퀵 메뉴를 가로로 더 넓게 펼칠지 결정 */
    .quick-grid {
        grid-template-columns: repeat(6, 1fr); /* 태블릿에선 6열 등 유동적으로 */
    }
    .quick-item {
        height: auto;
        padding: 15px 5px;
    }
}

/* 768px 이하 (모바일) */
@media (max-width: 768px) {
    .quick-grid {
        grid-template-columns: repeat(3, 1fr); /* 모바일은 다시 3열 */
    }
    
    .swiper-controls {
        position: static; /* 모바일은 이미지 밖으로 빼거나 하단 고정 */
        width: 100%;
        background: #fff;
        justify-content: space-between;
        border-radius: 0;
        margin-top: -5px;
    }
    .main-visual {
        border-radius: 10px;
    }
}
/* --- Content Section Common --- */
.content-section {
    padding-top: 60px;
}
/* 컨테이너는 이전 섹션에서 정의한 .container 사용 (flex, gap:20px) */

/* 섹션 타이틀 공통 */
.sec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.sec-title {
    font-size: 20px;
    font-weight: 700;
    color: #111;
}

/* 텍스트 말줄임 공통 클래스 */
.text-ellipsis {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   Left Area: 내 주변 공연콘텐츠
   ========================================= */
.content-left {
    flex: 3.2; /* 약 70% 너비 */
    min-width: 0; /* flex 자식 요소 말줄임 버그 방지 */
}

/* 위치 기준 버튼 */
.btn-location {
    font-size: 14px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Paperozi', sans-serif;
}
.btn-location svg {
    color: #ccc;
}

/* 필터 셀렉트 박스 */
.filter-bar {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 25px;
}
.select-box {
    flex: 1;
    position: relative;
    border-right: 1px solid #ddd;
}
.select-box:last-child {
    border-right: none;
}
.select-box select {
    width: 100%;
    height: 45px;
    padding: 0 15px;
    border: none;
    appearance: none; /* 기본 화살표 제거 */
    font-size: 14px;
    color: #555;
    background: #fff;
    cursor: pointer;
    outline: none;
}
/* 커스텀 화살표 아이콘 위치 */
.select-box i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    pointer-events: none;
}

/* 포스터 그리드 리스트 */
.poster-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4열 배치 */
    gap: 20px;
}
.poster-item {
    width: 100%;
}
.poster-item .thumb {
    width: 100%;
    height: 0;
    padding-bottom: 135%; /* 포스터 비율 유지 (약 1:1.35) */
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #f4f4f4;
}
.poster-item .thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.poster-item:hover .thumb img {
    transform: scale(1.05); /* 호버 시 확대 효과 */
}

/* 태그 스타일 */
.tags {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.tag {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 2px;
    line-height: 1.2;
}
.tag.blue {
    background: #4a57e6;
    color: #fff;
}
.tag.line {
    border: 1px solid #ddd;
    color: #666;
}

/* 타이틀 & 날짜 */
.poster-item .title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    margin-bottom: 5px;
    /* 2줄 말줄임 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 42px; /* 2줄 높이 고정 */
}
.poster-item .date {
    font-size: 13px;
    color: #888;
}


/* =========================================
   Right Area: 공지사항 & 티켓
   ========================================= */
.content-right {
    flex: 1; /* 약 30% 너비 */
    padding-left: 10px; /* 간격 */
}

.board-group {
    margin-bottom: 40px;
}
.board-group.mt-40 {
    margin-top: 40px;
}
.sec-header.small {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}
.btn-more {
    font-size: 14px;
    color: #333;
}

/* 공지사항 리스트 */
.board-list li {
    margin-bottom: 15px;
}
.board-link {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}
.board-link:hover {
    text-decoration: underline;
}
.board-date {
    display: block;
    font-size: 12px;
    color: #999;
}

/* 공연릴레이티켓 리스트 */
.ticket-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    gap: 10px;
}
.badge-sale {
    background: #0b0d68;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    flex-shrink: 0;
}
.ticket-info {
    flex: 1;
    min-width: 0; /* 말줄임 위해 필수 */
}
.ticket-title {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin-bottom: 3px;
}
.ticket-title:hover {
    text-decoration: underline;
}
.ticket-period {
    display: block;
    font-size: 12px;
    color: #888;
}

/* =========================================
   Responsive Media Queries
   ========================================= */

/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    /* 이미 상위 .container가 column으로 변하므로 너비만 조정 */
    .content-left, .content-right {
        width: 100%;
        padding-left: 0;
    }
    
    .poster-grid {
        grid-template-columns: repeat(3, 1fr); /* 3열로 줄임 */
    }
    
    .content-right {
        display: flex; /* 우측 영역을 가로로 배치해서 공간 활용 (선택사항) */
        gap: 30px;
        margin-top: 30px;
    }
    .board-group {
        flex: 1;
        margin-top: 0 !important;
    }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column; /* 필터 세로 배치 */
    }
    .select-box {
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    .select-box:last-child {
        border-bottom: none;
    }
    
    .poster-grid {
        grid-template-columns: repeat(2, 1fr); /* 2열로 줄임 */
        gap: 15px;
    }
    
    /* 태블릿에서 가로로 바꿨던 우측 영역 다시 세로로 */
    .content-right {
        flex-direction: column;
        gap: 0;
    }
    .board-group {
        margin-bottom: 30px;
    }
}
/* =========================================
   Promo Banner Section
   ========================================= */
.promo-banner {
    background: linear-gradient(135deg, #ffe033 0%, #ffd600 100%); /* 노란색 그라디언트 */
    padding: 30px 0;
    margin-bottom: 0;
}

.banner-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    width: 100%;
}

/* 공통 서브텍스트 */
.banner-sub {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}

/* 1. 좌측 영역 */
.banner-left {
    flex-shrink: 0;
}
.banner-title {
    font-size: 26px;
    font-weight: 800;
    color: #111;
    line-height: 1.3;
}
.banner-title .highlight {
    color: #c20033; /* 빨간색 강조 */
}

/* 2. 중앙 캐릭터 */
.banner-center {
    flex-shrink: 0;
    margin: 0 20px;
}
.banner-center img {
    width: auto;
    height: 100px;
    display: block;
}

/* 3. 우측 영역 */
.banner-right {
    flex: 1;
    max-width: 400px;
    text-align: left;
}
.banner-cta {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 12px;
}
.banner-cta .highlight {
    color: #c20033;
}

/* 검색창 + 버튼 그룹 */
.search-group {
    display: flex;
    gap: 10px;
    align-items: stretch; /* 높이 맞춤 */
}
.banner-search {
    /* flex: 1; */
    height: 56px;
    padding: 0 15px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    outline: none;
}
.btn-channel {
    width: 60px;
    height: 48px;
    background: #111;
    color: #ffe033; /* 노란색 텍스트 */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-weight: 700;
    transition: 0.3s;
}
.btn-channel:hover {
    background: #333;
}
.ch-icon {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -1px;
}
.btn-channel i {
    font-size: 16px;
}

/* =========================================
   Responsive
   ========================================= */

/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    .banner-wrap {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    
    .banner-left,
    .banner-center,
    .banner-right {
        flex: 1 1 100%;
        max-width: none;
    }
    
    .banner-center {
        order: -1; /* 캐릭터를 맨 위로 이동 (선택사항) */
        margin: 10px 0;
    }
    
    .banner-right {
        text-align: center;
    }
    
    .search-group {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    .promo-banner {
        padding: 25px 0;
    }
    
    .banner-title {
        font-size: 22px;
    }
    
    .banner-cta {
        font-size: 18px;
    }
    
    .banner-center img {
        width: 90%; /* 캐릭터 크기 축소 */
        height: auto;
        text-align: center;
        margin: auto;
    }
    
    .search-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .btn-channel {
        width: 100%;
        height: 44px;
    }
}
/* 탭 메뉴 스타일 */
.tab-menu {
    display: flex;
    border-bottom: 1px solid #ddd; /* 하단 라인 */
    margin-bottom: 25px;
}

.tab-btn {
    flex: 1; /* 3등분 */
    padding: 15px 0;
    font-size: 16px;
    font-weight: 500;
    color: #888;
    background: transparent;
    border-bottom: 2px solid transparent; /* 활성 상태 표시용 */
    transition: all 0.3s;
    font-family: 'Paperozi', sans-serif;
}

.tab-btn:hover {
    color: #333;
}

/* 활성화된 탭 스타일 */
.tab-btn.active {
    color: #0b0d68; /* 메인 컬러 */
    font-weight: 700;
    border-bottom: 2px solid #0b0d68;
}

/* 탭 콘텐츠 패널 기본 숨김 */
.tab-pane {
    display: none;
}

/* 활성화된 패널만 보임 */
.tab-pane.active {
    display: grid; /* 기존 poster-grid의 display 속성 유지 */
}

/* 모바일 반응형 처리 */
@media (max-width: 768px) {
    .tab-btn {
        font-size: 14px;
        padding: 12px 0;
    }
	.header-top {
    padding: 11px 0;
}
    .nav-right {
        display: block;
    }
}
/* ===== top-menu 수정 (번호 위 / 링크 아래) ===== */
.top-menu {
    color: #fff;
    font-family: 'Paperozi';
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.top-tel {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
    letter-spacing: -0.3px;
}
.top-tel i { margin-right: 5px; font-size: 13px; }
.top-links {
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 2px;
}
.top-links a { color: #fff; }
.top-links a:hover { text-decoration: underline; }
.top-links .sep { margin: 0 4px; opacity: 0.5; }

/* ===== 모바일 768px 헤더 수정 ===== */
@media (max-width: 768px) {

    .header-top { padding: 11px 0; }

    .header-top .inner {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }

    .logo { margin-bottom: 0 !important; }
    .logo img { height: 46px !important; }

    /* 검색창 — 기존 모바일 그대로 유지 */
    .search-wrap { display: none !important; }

    /* top-menu 오른쪽 정렬 유지 */
    .top-menu {
        align-items: flex-end !important;
        gap: 3px !important;
    }
    .top-tel {font-size: 20px !important;margin-bottom: 0;}
    .top-links {font-size: 14px !important;}

    /* 이용안내만 모바일에서 숨김 */
    .top-links .hide-mobile { display: none !important; }
}
/* --- 가입 래퍼 --- */
.naru-join-wrap {
    max-width: 100%;
    margin: auto;
    padding: 0 16px;
    width: 100%;
}
@media (max-width: 480px) {

    .naru-join-wrap {margin: auto;padding: 0;}
	}
/* ── 헤더 색종이 캔버스 ── */
.header {
    position: relative;
}

#confettiCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;             /* ← 9999 → 1 로 낮춤 */
    display: block;
}

/* ===================================================
   FOOTER
=================================================== */
.site-footer {
    background: #0d1b3e;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}

/* 상단 링크 바 */
.ft-topbar {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ft-nav {
    display: flex;
    align-items: center;
    padding: 12px 0;
    flex-wrap: wrap;
    gap: 0;
}
.ft-nav a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 14px;
    transition: color 0.2s;
}
.ft-nav a:first-child { padding-left: 0; }
.ft-nav a:hover { color: #fff; }
.ft-strong {
    color: #fff !important;
    font-weight: 700 !important;
}
.ft-nav-div {
    width: 1px;
    height: 12px;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}

/* 메인 */
.ft-main { padding: 30px 0 28px; }
.ft-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

/* 로고 */
.ft-logo-wrap { flex-shrink: 0; }
.ft-logo { display: inline-block; }
.ft-logo img {
    height: 74px;
    width: auto;
    display: block;
}

/* 주소 */
.ft-address {
    flex: 1;
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.ft-info-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.55);
    line-height: 1.8;
}
.ft-info-row a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.2s;
}
.ft-info-row a:hover { color: #fff; }
.ft-div {
    margin: 0 6px;
    color: rgba(255,255,255,0.2);
}
.ft-bank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}
.ft-bank svg { width: 13px; height: 13px; flex-shrink: 0; }

/* 카피라이트 */
.ft-right { flex-shrink: 0; }
.ft-copy {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    margin: 0;
    text-align: right;
    line-height: 1.8;
}

/* ===== 반응형 ===== */
@media (max-width: 900px) {
    .ft-inner { align-items: flex-start; }
    .ft-right { width: 100%; }
    .ft-copy { text-align: left; }
}
@media (max-width: 600px) {
    .ft-inner { flex-direction: column; gap: 18px; }
    .ft-info-row { font-size: 12px; line-height: 1.9; }
    .ft-div { margin: 0 4px; }
    .ft-bank { flex-wrap: wrap; }
    .ft-logo img {height: 57px;}
    .swiper-slide img {
    width: 100%;
    height: 227px;
    object-fit: cover;
    display: block;
}
}
/* ===================================================
   광고배너 + FAQ배너 + 계좌 섹션
=================================================== */
.banner-faq-section {
    padding: 40px 0;
    background: #f8fafd;
    border-top: 1px solid #eaeef6;
    border-bottom: 1px solid #eaeef6;
}
.bfaq-wrap {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
}
.bfaq-left  { flex: 2.2; min-width: 0; display: flex; flex-direction: column; }
.bfaq-right { flex: 1;   min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* ===== 좌측 슬라이드 ===== */
.bfaqSwiper {
    border-radius: 14px;
    overflow: hidden;
    flex: 1;
}
.bfaq-slide-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 240px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: filter 0.2s;
}
.bfaq-slide-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.08);
    transition: background 0.2s;
}
.bfaq-slide-item:hover::before { background: rgba(0,0,0,0.0); }

.bfaq-slide-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    text-align: center;
    width: 100%;
    height: 100%;
}
.bfaq-slide-content > svg {
    width: 60px;
    height: 60px;
    margin-bottom: 4px;
    opacity: 0.5;
}
.bfaq-slide-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.75);
    margin: 0;
}
.bfaq-slide-title {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.bfaq-slide-desc {
    font-size: 13.5px;
    color: rgba(255,255,255,0.8);
    line-height: 1.65;
    margin: 0;
}
.bfaq-slide-btn {
    margin-top: 8px;
    display: inline-block;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.45);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 22px;
    border-radius: 30px;
    transition: background 0.2s;
}
.bfaq-slide-item:hover .bfaq-slide-btn { background: rgba(255,255,255,0.3); }

/* 컨트롤 */
.bfaq-ad-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0 0;
}
.bfaq-ad-prev,
.bfaq-ad-next {
    width: 28px; height: 28px;
    border: 1.5px solid #dde6f5;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; padding: 0;
    transition: border-color 0.2s, background 0.2s;
}
.bfaq-ad-prev:hover, .bfaq-ad-next:hover { border-color: #1255a4; background: #eef3fc; }
.bfaq-ad-prev svg, .bfaq-ad-next svg { width: 12px; height: 12px; color: #666; }

.bfaq-ad-pagination { display: flex; gap: 5px; align-items: center; }
.bfaq-ad-pagination .swiper-pagination-bullet {
    width: 7px; height: 7px;
    background: #c5d7f5; border-radius: 50%;
    opacity: 1; cursor: pointer; margin: 0 !important;
    transition: background 0.2s, width 0.2s;
}
.bfaq-ad-pagination .swiper-pagination-bullet-active {
    background: #1255a4; width: 20px; border-radius: 4px;
}

/* ===== 우측 FAQ 배너 ===== */
.bfaq-banner-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: linear-gradient(150deg, #c1457d 0%, #005ac5 100%);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.bfaq-banner-link:hover {
    box-shadow: 0 8px 24px rgba(18,85,164,0.22);
    transform: translateY(-2px);
}

/* 배너 상단 */
.bfaq-banner-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 18px 16px;
}
.bfaq-banner-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bfaq-banner-icon-wrap svg { width: 28px; height: 28px; }

.bfaq-banner-text { flex: 1; min-width: 0; }
.bfaq-banner-tag {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 5px;
}
.bfaq-banner-title {
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 3px;
}
.bfaq-banner-desc {
    font-size: 11.5px;
    color: rgba(255,255,255,0.65);
    margin: 0;
    line-height: 1.55;
}
.bfaq-banner-arrow {
    flex-shrink: 0;
}
.bfaq-banner-arrow svg { width: 18px; height: 18px; }

/* FAQ 리스트 프리뷰 */
.bfaq-faq-preview {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.bfaq-faq-preview li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.75);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}
.bfaq-faq-preview li:last-child { border-bottom: none; }
.bfaq-banner-link:hover .bfaq-faq-preview li { color: rgba(255,255,255,0.9); }
.bfaq-faq-preview li svg {
    width: 13px; height: 13px;
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
}

/* ===== 계좌 ===== */
.bfaq-account {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid #e4eaf5;
    border-radius: 12px;
    flex-shrink: 0;
}
.bfaq-account-icon {
    width: 42px;
    height: 45px;
    border-radius: 9px;
    background: #1255a4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.bfaq-account-icon svg { width: 19px; height: 19px; }
.bfaq-account-info { flex: 1; min-width: 0; }
.bfaq-account-label  {font-size: 13px;color: #aaa;font-weight: 400;margin: 0 0 1px;}
.bfaq-account-num    {font-size: 15px;font-weight: 800;color: #0d1b3e;margin: 0 0 1px;letter-spacing: 0.3px;}
.bfaq-account-name   {font-size: 13px;color: #888;margin: 0;}

.bfaq-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    background: #fff;
    border: 1.5px solid #c5d7f5;
    border-radius: 7px;
    font-size: 12px; font-weight: 700;
    color: #1255a4;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}
.bfaq-copy-btn:hover { background: #eef3fc; border-color: #1255a4; }
.bfaq-copy-btn svg { width: 12px; height: 12px; }

/* ===== 반응형 ===== */
@media (max-width: 1024px) {
    .bfaq-wrap { gap: 18px; }
    .bfaq-slide-title { font-size: 20px; }
}
@media (max-width: 768px) {
    .bfaq-wrap { flex-direction: column; }
    .bfaq-left, .bfaq-right { flex: none; width: 100%; }
    .bfaq-slide-item { min-height: 200px; }
    .bfaq-banner-link { flex: none; }
    .banner-faq-section { padding: 26px 0; }
}
@media (max-width: 480px) {
    .bfaq-slide-title { font-size: 17px; }
    .bfaq-slide-desc { font-size: 12px; }
    .bfaq-banner-title { font-size: 15px; }
    .bfaq-faq-preview li { font-size: 12px; padding: 9px 14px; }
    .bfaq-account-num { font-size: 13px; }
    .bfaq-banner-body { padding: 16px 14px 12px; }
}
.bfaq-slide-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 180px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    border-radius: 10px;

    /* 배경이미지 설정 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* 이미지 없을 때 폴백 색상 */
    background-color: #1255a4;
}

/* 이미지 위 어둠 오버레이 (텍스트 가독성) */
.bfaq-slide-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.05) 100%);
    z-index: 0;
}

.bfaq-slide-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 5px;
    padding: 18px 16px;
    width: 100%;
    height: 100%;
}

.bfaq-slide-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.8);
    margin: 0;
}
.bfaq-slide-title {
    font-size: 15px;
    font-weight: 900;
    color: #fff;
    margin: 0;
    line-height: 1.35;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.bfaq-slide-desc {
    font-size: 11.5px;
    color: rgba(255,255,255,0.75);
    margin: 0;
    line-height: 1.5;
}
.bfaq-slide-btn {
    margin-top: 6px;
    display: inline-block;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    transition: background 0.2s;
}
.bfaq-slide-item:hover .bfaq-slide-btn { background: rgba(255,255,255,0.28); }