body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    overscroll-behavior-y: none;
    touch-action: manipulation;
}

.dynamic-h {
    height: 100vh;
    height: 100dvh;
}

.stage {
    display: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stage.active {
    display: flex !important;
    opacity: 1;
}

/* 스크롤바 숨기기 (3단계 체크박스 등) */
::-webkit-scrollbar {
    display: none;
}

/* 2단계 타일 */
.fake-tile {
    transition: transform 0.1s, border 0.2s, background-color 0.2s;
    cursor: pointer;
    overflow: hidden;
}

.fake-tile:active {
    transform: scale(0.92);
}

.fake-tile.selected {
    border: 4px solid #ef4444;
    background-color: #fee2e2;
    opacity: 0.9;
}

/* 4단계 빨간 버튼 애니메이션 */
@keyframes pulse-red {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.btn-pulse {
    animation: pulse-red 2s infinite;
}

/* 수료식 90년대 스타일 애니메이션 */
@keyframes rainbow {
    0% {
        color: red;
    }

    14% {
        color: orange;
    }

    28% {
        color: yellow;
    }

    42% {
        color: green;
    }

    57% {
        color: blue;
    }

    71% {
        color: indigo;
    }

    85% {
        color: violet;
    }

    100% {
        color: red;
    }
}

.text-rainbow {
    animation: rainbow 2s linear infinite;
}

.marquee {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* 10단계 흔들림 효과 */
.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}
@keyframes grow-infinite {
    0% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(3.5); opacity: 0.7; }
    100% { transform: scale(10); opacity: 1; }
}

.animate-grow {
    display: inline-block;
    transform-origin: bottom right;
    animation: grow-infinite 45s linear forwards;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    border-radius: 4px;
    padding: 1px 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}