/**
 * Form Toggle Styles
 * 모든 디바이스에서 폼 토글 애니메이션
 */


    /* form-container 기본 스타일 - 보이는 상태 */
    .form-container {
        transform: translateY(0);
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* form-container가 숨겨진 상태 */
    .form-container.is-hidden {
        transform: translateY(100%) !important;
    }
    
    /* 토글 버튼 스타일 */
    .btn--toggle {
        position: relative;
        z-index: 1000;
        transition: all 0.3s ease;
    }
    
    /* form-container 내부의 토글 버튼 스타일 */
    .form-container .btn--toggle {
        height: 32px;
        aspect-ratio: 1 / 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px 8px 0 0;
        background-color: rgba(255,255,255,0.8);
        backdrop-filter: blur(4px);
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
    
    .form-container .btn--toggle svg {
        width: 20px;
        transition: transform 0.3s ease;
    }
    
    .form-container .btn--toggle svg path {
        transition: stroke 0.3s ease;
    }
    
    /* 토글 버튼 활성화 상태 */
    .btn--toggle.is-active {
        background-color: var(--color-text-primary) !important;
        animation: bounce 1s ease infinite;
    }
    
    .btn--toggle.is-active svg path {
        stroke: var(--color-white) !important;
    }
    
    .btn--toggle.is-active a {
        transform: rotate(180deg) !important;
    }
    
    /* 통통 튀는 애니메이션 */
    @keyframes bounce {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-4px);
            border-radius: 8px;
        }
        100% {
            transform: translateY(0);
        }
    }
    @media (max-width: 767px){
        .form-container .btn--toggle{
            aspect-ratio: 2/1;
        }
    }