/* 에픽 배너 - 화려하고 복잡한 스타일 */
.epic-banner {
    display: block;
    background:
        linear-gradient(135deg, #1a0a2e 0%, #16213e 25%, #0f3460 50%, #16213e 75%, #1a0a2e 100%);
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 16px 14px;
    margin-bottom: 12px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 그리드 배경 */
.banner-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: gridMove 20s linear infinite;
    opacity: 0.3;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(20px, 20px); }
}

/* 방사형 광선 */
.banner-rays {
    position: absolute;
    inset: -100%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(239, 68, 68, 0.1) 30deg,
        transparent 60deg,
        rgba(124, 58, 237, 0.1) 90deg,
        transparent 120deg,
        rgba(251, 146, 60, 0.1) 150deg,
        transparent 180deg,
        rgba(168, 85, 247, 0.1) 210deg,
        transparent 240deg,
        rgba(220, 38, 38, 0.1) 270deg,
        transparent 300deg,
        rgba(139, 92, 246, 0.1) 330deg,
        transparent 360deg
    );
    animation: raysRotate 15s linear infinite;
}

@keyframes raysRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 네온 테두리 */
.neon-border-top, .neon-border-bottom, .neon-border-left, .neon-border-right {
    position: absolute;
    background: linear-gradient(90deg, #7c3aed, #ef4444, #fb923c, #7c3aed);
    background-size: 200% 100%;
    animation: neonFlow 3s linear infinite;
}

.neon-border-top {
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.neon-border-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.neon-border-left {
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
}

.neon-border-right {
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
}

@keyframes neonFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 홀로그램 효과 */
.hologram-layer {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(139, 92, 246, 0.03) 0px,
        rgba(139, 92, 246, 0.03) 2px,
        transparent 2px,
        transparent 4px
    );
    animation: scanlines 8s linear infinite;
    pointer-events: none;
}

@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(8px); }
}

/* 에너지 웨이브 */
.energy-wave {
    position: absolute;
    inset: -50%;
    border-radius: 50%;
    animation: waveExpand 4s ease-out infinite;
}

.wave-1 {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.2) 0%, transparent 70%);
    animation-delay: 0s;
}

.wave-2 {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.2) 0%, transparent 70%);
    animation-delay: 1.3s;
}

.wave-3 {
    background: radial-gradient(circle, rgba(251, 146, 60, 0.2) 0%, transparent 70%);
    animation-delay: 2.6s;
}

@keyframes waveExpand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* 글리치 효과 */
.glitch-effect {
    position: absolute;
    inset: 0;
    background: rgba(239, 68, 68, 0.1);
    opacity: 0;
    animation: glitch 5s step-end infinite;
    mix-blend-mode: screen;
}

@keyframes glitch {
    0%, 90%, 100% { opacity: 0; }
    91% { opacity: 0.5; transform: translate(2px, 2px); }
    92% { opacity: 0.5; transform: translate(-2px, -2px); }
    93% { opacity: 0; }
}

/* 파티클 필드 */
.particle-field {
    position: absolute;
    inset: 0;
}

.energy-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #fbbf24 0%, #ef4444 100%);
    border-radius: 50%;
    box-shadow:
        0 0 10px #fbbf24,
        0 0 20px rgba(239, 68, 68, 0.5);
    animation: energyPulse 1.5s ease-in-out infinite;
}

@keyframes energyPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
        box-shadow:
            0 0 10px #fbbf24,
            0 0 20px rgba(239, 68, 68, 0.5);
    }
    50% {
        transform: scale(2);
        opacity: 1;
        box-shadow:
            0 0 20px #fbbf24,
            0 0 40px rgba(239, 68, 68, 0.8),
            0 0 60px rgba(251, 146, 60, 0.5);
    }
}

/* 메인 컨텐츠 */
.banner-main-content {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* 로고 컨테이너 */
.logo-container {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-ring {
    position: absolute;
    border: 2px solid;
    border-radius: 50%;
    animation: ringRotate 3s linear infinite;
}

.ring-1 {
    inset: -8px;
    border-color: rgba(124, 58, 237, 0.6) transparent rgba(239, 68, 68, 0.6) transparent;
    animation-duration: 3s;
}

.ring-2 {
    inset: -14px;
    border-color: transparent rgba(251, 146, 60, 0.5) transparent rgba(168, 85, 247, 0.5);
    animation-duration: 4s;
    animation-direction: reverse;
}

.ring-3 {
    inset: -20px;
    border-color: rgba(220, 38, 38, 0.4) transparent rgba(139, 92, 246, 0.4) transparent;
    animation-duration: 5s;
}

@keyframes ringRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.banner-logo-img {
    position: relative;
    z-index: 5;
    filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.8));
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* 타이틀 컨테이너 */
.title-container {
    position: relative;
    padding: 8px 0;
}

.title-glow-bg {
    position: absolute;
    inset: -10px;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.3) 0%, transparent 70%);
    filter: blur(15px);
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

.epic-title {
    font-size: 20px;
    font-weight: 900;
    margin: 0;
    position: relative;
    display: flex;
    gap: 2px;
    justify-content: center;
}

.char {
    display: inline-block;
    background: linear-gradient(180deg, #fca5a5 0%, #c084fc 50%, #fb923c 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: charBounce 0.6s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.8));
    text-shadow: 0 0 30px rgba(251, 146, 60, 0.6);
}

.char-1 {
    animation-delay: 0s;
}

.char-2 {
    animation-delay: 0.2s;
}

.char-3 {
    animation-delay: 0.4s;
}

@keyframes charBounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.15);
    }
}

.title-underline {
    height: 2px;
    margin-top: 4px;
    background: linear-gradient(90deg, transparent, #7c3aed, #ef4444, #fb923c, #7c3aed, transparent);
    background-size: 200% 100%;
    animation: underlineFlow 2s linear infinite;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
}

@keyframes underlineFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 부제목 */
.subtitle-container {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.subtitle-icon {
    font-size: 14px;
    animation: iconSpin 3s linear infinite;
}

.subtitle-icon:first-child {
    animation-direction: normal;
}

.subtitle-icon:last-child {
    animation-direction: reverse;
}

@keyframes iconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.epic-subtitle {
    font-size: 11px;
    color: #c084fc;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(124, 58, 237, 0.8);
}

/* 코너 장식 */
.corner-effect {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid;
    opacity: 0.6;
    animation: cornerPulse 2s ease-in-out infinite;
}

.corner-tl {
    top: 8px;
    left: 8px;
    border-color: #7c3aed transparent transparent #7c3aed;
    border-radius: 4px 0 0 0;
}

.corner-tr {
    top: 8px;
    right: 8px;
    border-color: #ef4444 #ef4444 transparent transparent;
    border-radius: 0 4px 0 0;
    animation-delay: 0.5s;
}

.corner-bl {
    bottom: 8px;
    left: 8px;
    border-color: transparent transparent #fb923c #fb923c;
    border-radius: 0 0 0 4px;
    animation-delay: 1s;
}

.corner-br {
    bottom: 8px;
    right: 8px;
    border-color: transparent #a855f7 #a855f7 transparent;
    border-radius: 0 0 4px 0;
    animation-delay: 1.5s;
}

@keyframes cornerPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* 호버 시 완전 변신 */
.epic-banner:hover {
    background: linear-gradient(135deg, #450a0a 0%, #7c2d12 25%, #991b1b 50%, #7c2d12 75%, #450a0a 100%);
    background-size: 200% 200%;
    animation: fireGradient 3s ease infinite;
}

@keyframes fireGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.epic-banner:hover .banner-grid-bg {
    background-image:
        linear-gradient(rgba(239, 68, 68, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(239, 68, 68, 0.2) 1px, transparent 1px);
    animation-duration: 5s;
}

.epic-banner:hover .banner-rays {
    animation-duration: 5s;
}

.epic-banner:hover .energy-dot {
    background: radial-gradient(circle, #fbbf24 0%, #ef4444 100%);
    animation-duration: 0.8s;
}

.epic-banner:hover .epic-title .char {
    background: linear-gradient(180deg, #fbbf24 0%, #ef4444 50%, #dc2626 100%);
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 25px rgba(239, 68, 68, 1));
    animation-duration: 0.4s;
}

.epic-banner:hover .title-underline {
    background: linear-gradient(90deg, transparent, #ef4444, #fbbf24, #fb923c, #ef4444, transparent);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.8);
}

.epic-banner:hover .epic-subtitle {
    color: #fbbf24;
    text-shadow: 0 0 15px rgba(251, 191, 36, 1);
}

.epic-banner:hover .corner-effect {
    border-color: #ef4444;
    opacity: 1;
    animation-duration: 1s;
}

.epic-banner:hover .neon-border-top,
.epic-banner:hover .neon-border-bottom,
.epic-banner:hover .neon-border-left,
.epic-banner:hover .neon-border-right {
    background: linear-gradient(90deg, #ef4444, #fbbf24, #fb923c, #ef4444);
    animation-duration: 1.5s;
}