미디어위키:Template.css

/* Proitem 애니메이션 */
.wip-stripe-layer {
    position: absolute;
    top: 0;
    left: -280px;
    width: calc(100% + 560px);
    height: 100%;
    opacity: 0.08;
    background: repeating-linear-gradient(
        45deg,
        #969696,
        #969696 10px,
        transparent 10px,
        transparent 20px
    );
    z-index: 0;
}
.wip-active .wip-stripe-layer {
    animation: wip-stripe-move 8s linear infinite;
}
.wip-standby .wip-stripe-layer {
    animation: none;
}
@keyframes wip-stripe-move {
    from { transform: translateX(0); }
    to { transform: translateX(280px); }
}

/* 펼접 */

[id^="collapsible"] {
  overflow: hidden;
  transition: max-height .25s ease;
  max-height: 0;
}

/* Color */
.color-text {
    color: var(--text-color);
}

.color-text a,
.color-text a:visited,
.color-text a:hover,
.color-text a:active {
    color: var(--text-color) !important;
    text-decoration-color: var(--text-color) !important;
}

/* 글리치 */
.crt-glitch-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 5px;
    animation: crt-pixel-jitter 5.5s steps(1, end) infinite;
}

.crt-glitch-panel > * {
    position: relative;
    z-index: 2;
}

.crt-glitch-panel::before {
    content: "";
    position: absolute;
    inset: -80px 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.28;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.08) 0px,
            rgba(255,255,255,0.08) 1px,
            transparent 2px,
            transparent 5px
        );
    mix-blend-mode: screen;
    animation: crt-scanlines-up 7s linear infinite;
}

.crt-glitch-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255,255,255,0.18) 48%,
            rgba(212,90,162,0.28) 50%,
            rgba(90,120,255,0.16) 52%,
            transparent 56%
        );
    mix-blend-mode: screen;
    animation: crt-glitch-band-up 6.5s steps(1, end) infinite;
}

@keyframes crt-scanlines-up {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-72px);
    }
}

@keyframes crt-glitch-band-up {
    0%, 12%, 27%, 43%, 58%, 76%, 100% {
        opacity: 0;
        transform: translateY(100%);
    }

    13% {
        opacity: 0.75;
        transform: translateY(70%);
    }

    14% {
        opacity: 0.15;
        transform: translateY(62%) skewX(-2deg);
    }

    28% {
        opacity: 0.55;
        transform: translateY(35%);
    }

    29% {
        opacity: 0.18;
        transform: translateY(28%) skewX(2deg);
    }

    44% {
        opacity: 0.65;
        transform: translateY(10%);
    }

    45% {
        opacity: 0.12;
        transform: translateY(4%) skewX(-1deg);
    }

    59% {
        opacity: 0.5;
        transform: translateY(-20%);
    }

    60% {
        opacity: 0.16;
        transform: translateY(-26%) skewX(2deg);
    }

    77% {
        opacity: 0.55;
        transform: translateY(-55%);
    }

    78% {
        opacity: 0;
        transform: translateY(-70%);
    }
}

@keyframes crt-pixel-jitter {
    0%, 92%, 100% {
        transform: translate(0, 0);
        filter: none;
    }

    93% {
        transform: translate(1px, 0);
        filter: contrast(1.08);
    }

    94% {
        transform: translate(-1px, 1px);
        filter: contrast(1.12) brightness(1.05);
    }

    95% {
        transform: translate(0, -1px);
        filter: contrast(1.04);
    }

    96% {
        transform: translate(1px, 1px);
        filter: none;
    }
}

/* 글로우 */
.crt-glow-content {
    position: relative;
    z-index: 2;
    text-shadow:
        0 0 2px rgba(255,255,255,0.35),
        0 0 6px rgba(212,90,162,0.22),
        0 0 12px rgba(133,67,105,0.18);
    filter: drop-shadow(0 0 5px rgba(212,90,162,0.18));
}

.crt-glow-content::before {
    content: "";
    position: absolute;
    inset: -24px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255,255,255,0.08) 0%,
            rgba(212,90,162,0.10) 18%,
            rgba(133,67,105,0.08) 34%,
            transparent 68%
        );
    filter: blur(18px);
    opacity: 0.85;
}

.crt-glitch-panel {
    box-shadow:
        inset 0 0 18px rgba(255,255,255,0.04),
        inset 0 0 42px rgba(133,67,105,0.10),
        0 0 18px rgba(133,67,105,0.20);
}

.crt-glitch-panel .fake-h1,
.crt-glitch-panel h1,
.crt-glitch-panel h2,
.crt-glitch-panel strong {
    text-shadow:
        0 0 3px rgba(255,255,255,0.65),
        0 0 10px rgba(255,255,255,0.28),
        0 0 18px rgba(212,90,162,0.35),
        0 0 32px rgba(133,67,105,0.24);
}