/* ========================================
   SECTION 05: 이벤트 배너
   ✦ 다크 배경 + 오로라 발광
======================================== */

.event-banner {
    padding: 0;
    background: #0a0e1a;
    position: relative;
    overflow: hidden;
}

/* 오로라 발광 효과 - 좌측 */
.event-banner::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    top: -100px; left: -150px;
    background: radial-gradient(ellipse at center, rgba(85,58,231,.35) 0%, rgba(85,58,231,.1) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}
/* 오로라 발광 효과 - 우측 */
.event-banner::after {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    bottom: -150px; right: -150px;
    background: radial-gradient(ellipse at center, rgba(107,82,237,.3) 0%, rgba(107,82,237,.08) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.event-wrap {
    position: relative;
    background: transparent;
    border-radius: 0;
    padding: 80px 80px;
    display: flex; align-items: center; justify-content: space-between;
    overflow: hidden;
    margin: 0;
    z-index: 1;
}
/* 오프라인 교육 배경 이미지 */
.event-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/오프라인교육이미지.png') center/cover no-repeat;
    opacity: 0.4;
    z-index: 0;
}
.event-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, #0a0e1a 0%, transparent 15%, transparent 85%, #0a0e1a 100%),
        linear-gradient(to bottom, #0a0e1a 0%, transparent 15%, transparent 85%, #0a0e1a 100%);
    z-index: 0;
}

/* 기존 shape 장식 숨김 (오로라로 대체) */
.event-bg-shape { display: none; }

.event-content { position: relative; z-index: 2; max-width: 540px; color: var(--text-inverse); }
.event-badge-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.event-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; background: rgba(85,58,231,.15);
    border-radius: 20px; font-size: 16px; font-weight: 700;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(85,58,231,.25);
    color: var(--point-light);
}
.event-date { font-size: 17px; color: rgba(255,255,255,.4); }
.event-title { font-size: 34px; font-weight: 800; line-height: 1.3; margin-bottom: 24px; letter-spacing: -.3px; }
.event-title span { font-size: 18px; font-weight: 400; display: block; margin-top: 10px; opacity: .7; }
.event-title em {
    font-style: normal; font-weight: 800;
    color: var(--point-light);
}
.event-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; position: relative; z-index: 2; }
.event-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(85,58,231,.15);
    border-radius: var(--radius-sm);
    font-size: 17px; font-weight: 500;
}
.event-chip i { color: var(--point-light); font-size: 16px; }

.event-wrap .btn-glow {
    background: linear-gradient(135deg, var(--point), var(--accent));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(85,58,231,.35);
}
.event-wrap .btn-glow:hover {
    box-shadow: 0 8px 24px rgba(85,58,231,.5);
    background: linear-gradient(135deg, var(--accent), var(--point-light));
}

.event-art {
    position: relative; width: 240px; height: 240px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    z-index: 2;
}
.event-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(85,58,231,.1); }
.ring-1 { width: 240px; height: 240px; animation: spinSlow 20s linear infinite; }
.ring-2 { width: 175px; height: 175px; border-color: rgba(85,58,231,.15); animation: spinSlow 15s linear infinite reverse; }
.ring-3 { width: 110px; height: 110px; border-color: rgba(85,58,231,.2); animation: spinSlow 10s linear infinite; }
.event-center-icon {
    width: 72px; height: 72px;
    background: rgba(85,58,231,.12);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(85,58,231,.25);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--point-light);
}
@keyframes spinSlow { to { transform: rotate(360deg); } }