@charset "utf-8";

/* 각 섹션 뷰포트 크기 및 정렬 */
section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    padding: 20px;
}


.section-inner {
    width: 100%;
    text-align: center;
}

/* 둥둥 떠다니는 애니메이션 */
@keyframes floating {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); } /* 15px 정도 부드럽게 상승 */
    100% { transform: translateY(0); }
}


/* 공통 애니메이션 클래스 */
.floating-deco {
    display: inline-block !important;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    max-width: 50px; /* 데코 이미지 크기 조절 */
    position: relative;
    z-index: 5;
}

/* 클래스명으로 딜레이(엇박자) 지정 */
.delay-1 { animation-delay: 0s; }
.delay-2 { animation-delay: 0.8s; }
.delay-3 { animation-delay: 1.6s; }

/* 섹션 애니메이션(slideUp1)과 겹치지 않게 주의하세요 */

/* 화살표 바운스 애니메이션 */
@keyframes arrowBounce {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    70% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 0;
        transform: translateY(15px);
    }
}

/* 입력 폼 및 텍스트 영역 스타일링 */
textarea.form-control {
    resize: none;
    height: 120px;
    font-size: 0.85rem;
    background-color: rgba(255, 255, 255, 0.9);
}

.input-group-text {
    width: 95px;
    justify-content: center;
    background-color: #f8f9fa;
}