/* 물방울이 위로 올라가는 애니메이션 */
    @keyframes floatUp {
        0% {
            bottom: -20%;
            transform: translateX(0);
            opacity: 0;
        }
        10% {
            opacity: 1; /* 나타날 때 뚜렷하게 */
        }
        90% {
            opacity: 1;
        }
        100% {
            bottom: 120%;
            transform: translateX(-20px);
            opacity: 0;
        }
    }

    /* 좌우로 흔들리는 효과를 추가하여 현실감 부여 */
    @keyframes wobble {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(15px); }
    }

    .bubble-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none; /* 물방울이 클릭을 방해하지 않도록 설정 */
        z-index: 0; /* 폼 요소보다 뒤에 배치 */
    }

    .bubble {
        position: absolute;
        bottom: -20px;
        background: rgba(255, 255, 255, 0.4); /* 뚜렷한 흰색 반투명 */
        border: 1px solid rgba(255, 255, 255, 0.8); /* 뚜렷한 테두리 */
        border-radius: 50%;
        box-shadow: inset 0 0 10px rgba(255,255,255,0.5); /* 물방울 내부 입체감 */
        animation: floatUp infinite ease-in, wobble infinite ease-in-out alternate;
    }

    /* 각 물방울의 크기, 위치, 속도 랜덤 설정 */
    .b1 { left: 10%; width: 40px; height: 40px; animation-duration: 6s, 3s; animation-delay: 0s; }
    .b2 { left: 25%; width: 20px; height: 20px; animation-duration: 5s, 2s; animation-delay: 1s; }
    .b3 { left: 40%; width: 50px; height: 50px; animation-duration: 7s, 4s; animation-delay: 2s; }
    .b4 { left: 60%; width: 30px; height: 30px; animation-duration: 4s, 2.5s; animation-delay: 0.5s; }
    .b5 { left: 75%; width: 60px; height: 60px; animation-duration: 8s, 4.5s; animation-delay: 3s; }
    .b6 { left: 90%; width: 25px; height: 25px; animation-duration: 5.5s, 3s; animation-delay: 1.5s; }