@font-face {
    font-family: 'ClimateCrisisKR-1979';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/ClimateCrisisKR-1979.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* 관리자 페이지가 아닐 때만 overflow: hidden 적용 */
body:not(.admin-page) {
    overflow: hidden;
}

.background {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('https://images.unsplash.com/photo-1542272201-b1ca555f8505?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80');
    position: absolute;
    overflow: hidden;
    filter: blur(3px);
    z-index: -10;
}

.background-effect-prism, .background-effect-prism-back {
    width: 100vw; 
    height: 100vh; 
    position: fixed; 
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
}

/* 파티클 스타일 */
.particle {
    position: absolute;
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 100%;
    opacity: 0;
    animation-iteration-count: infinite;
    box-shadow: 10px -5px 3px rgba(255,255,255,0.2);
}

/* @keyframes spark1 {
    0%, 35%, 100% { opacity: 0; }
    30%, 70%, 90% { opacity: 1; }
}

@keyframes sparkmove1 {
    0% { transform: translate(0, 0) scale(1); filter: blur(4px); }
    100% { transform: translate(-900px, 1200px) scale(1.5); filter: blur(6px); }
}

@keyframes sparkmove2 {
    0% { transform: translate(0, 0) scale(1); filter: blur(1px); }
    100% { transform: translate(-600px, 800px) scale(1.2); filter: blur(3px); }
} */

/* 전경 - 1000px 초과에서만 표시 */
@media (min-width: 1001px) {
    .background-effect-prism .particle {
        animation-name: spark1, sparkmove1;
        /* animation-duration: 20s; */
         scale:200%;
    }
}

/* 원경 - 1000px 초과에서만 표시 */
@media (min-width: 1001px) {
    .background-effect-prism-back .particle {
        animation-name: spark1, sparkmove2;
        animation-duration: 40s;
        scale: 100%;
         z-index: 5 !important;
    }
}

/* 1000px 이하에서는 파티클 효과 완전히 숨김 */
@media (max-width: 1000px) {
    .background-effect-prism,
    .background-effect-prism-back {
        display: none;
        z-index: -1 !important;
    }
}