/**
 * 반응형 공통 스타일
 * 세 파일에서 공통으로 사용되는 반응형 스타일
 */

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    .form-field-wrapper {
        min-height: 50px;
    }

    .form-field-wrapper label {
        font-size: 0.75rem;
        padding: 5px 6px 3px 6px;
    }

    .form-field-wrapper input,
    .form-field-wrapper textarea,
    .form-field-wrapper select {
        font-size: 0.75rem;
        padding: 5px 6px;
        min-height: 22px;
    }

    .form-field-wrapper textarea {
        min-height: 28px;
    }

    /* 작은 필드 조정 */
    .form-field-wrapper[style*="height: 48px"],
    .form-field-wrapper[style*="height: 60px"] {
        padding: 1px 3px;
    }

    .form-field-wrapper[style*="height: 48px"] label,
    .form-field-wrapper[style*="height: 60px"] label {
        font-size: 0.7rem;
        margin-bottom: 1px;
    }

    .form-field-wrapper[style*="height: 48px"] input,
    .form-field-wrapper[style*="height: 48px"] select,
    .form-field-wrapper[style*="height: 60px"] input,
    .form-field-wrapper[style*="height: 60px"] select {
        font-size: 0.7rem;
        padding: 1px 3px;
        min-height: 18px;
    }

    .modal-content {
        width: 95%;
        margin: 0.5rem;
        padding: 1rem;
    }
}

/* 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
    .form-canvas {
        min-height: 200px;
        padding: var(--spacing-sm);
    }
}

/* 큰 화면 (1400px 이상) */
@media (min-width: 1400px) {
    .form-canvas {
        min-height: 400px;
    }
}