@charset "UTF-8";

/* ==========================================================================
   Blog Subpage (Our Blog Dedicated Layout)
   ========================================================================== */
.blog-hero {
    position: relative;
    width: 100%;
    min-height: 450px;
    background-color: #050505; /* 아주 어두운 차콜/블랙 */
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 120px 20px 60px;
}

/* 동적 배경 컨테이너 */
.blog-hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* 오버레이 텍스트 (초대형 투명 윤곽선 글씨) */
.blog-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-en);
    font-size: clamp(150px, 25vw, 400px);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.08);
    white-space: nowrap;
    opacity: 0;
    animation: fadeScaleIn 2s forwards, bgTextSlide 30s linear infinite alternate;
}

/* 글로우 스피어 효과 */
.blog-hero-bg .glow-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.8;
    mix-blend-mode: screen;
    animation: floatingGlow 12s infinite alternate ease-in-out;
}
.blog-hero-bg .glow-1 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.3) 0%, transparent 60%);
    top: -300px;
    left: -200px;
}
.blog-hero-bg .glow-2 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.25) 0%, transparent 60%);
    bottom: -250px;
    right: -150px;
    animation-delay: -6s;
    animation-duration: 15s;
}

.blog-hero-inner {
    position: relative;
    z-index: 10;
    max-width: 800px;
}

.blog-title {
    font-family: var(--font-en);
    font-weight: 900;
    font-size: 72px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 25px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.blog-title::after {
    content: '.';
    color: var(--electric-blue);
}

.blog-desc {
    font-size: 20px;
    color: #a1a1aa;
    line-height: 1.6;
    font-weight: 500;
    max-width: 600px;
    margin: 0 auto;
}

.blog-content {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 60px 40px 120px;
    min-height: 500px;
}

@media (max-width: 991px) {
    .blog-hero {
        min-height: 380px;
        padding: 100px 20px 40px;
    }
    .blog-title { font-size: 42px; margin-bottom: 20px; }
    .blog-desc { font-size: 16px; }
    .blog-hero-bg .glow-sphere { filter: blur(50px); }
    .blog-hero-bg .glow-1 { width: 300px; height: 300px; top: -100px; left: -50px; }
    .blog-hero-bg .glow-2 { width: 250px; height: 250px; bottom: -50px; right: -50px; }
    .blog-content { padding: 40px 20px 80px; }
}